Question

我一直在努力工作几个小时，将一个表格div放在我正在创建的网站上，我无法理解。我尝试使用margin：0 auto，定义宽度，但这不起作用。我也'保证金权利：自动; margin-left：auto;“，但这也没用。我真的不确定还有什么可以尝试。

另外，我正在尝试修改我的页脚以保持在页面底部。在所有内容之后，它会在一个页面上看起来很棒，但在另一个页面上，它将在内容之上。我应该为此制作另一个主题，还是有人可以帮助我解决这个问题？

包含表格的页面的HTML：

#body {
	background-color: #8AD4E6;
	font-color: #3E3E3E;
	font-family: "Akzidenz Grotesk" sans-serif;	
}

#content {
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	text-align: center;
	vertical-align: middle;
	position: relative;
}

#header {
	background-color: #6cf;
	margin:           10px;
	height:           120px;
	font-family: "Akzidenz Grotesk" sans-serif;	
	text-align: center;
	color: #4D8B4D;
	border: 2px solid black;
 }
 

 #headerimg {
	border: 2px solid;
	float: left;
	margin: 10px 5px 5px 5px;
	margin-left: 20px;
 }
 
 #sidebar{
 position: relative;
 float: right;
   margin: 10px;
   padding: 25px;
   background-color: #6cf;
   border: 2px solid black;
 }
 
 .sideheading {
	text-align: center;
	color: #4D8B4D;
	font-family: "Akzidenz Grotesk" sans-serif;	
 }

 
table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	text-align: center;
	padding: 5px;
	margin-left: 35%;
	position: relative;
	text-align: center;
	vertical-align: middle;
 }
 table th {
	font-style: bold;
 }
.female {
	background-color: #FFE6FF;
 }
.male {
	background-color: #D6EBFF;
 }
.uni{
	background-color: #D4FFD4;
}
#name{
	margin-left: 35%;
	text-align: center;
	vertical-align: middle;
	position: relative;
}

#navigation {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline;
	width: 20px;
	background-color: #6EC66E;
	margin-left: 44%;
	margin-top: 30px;
	text-align: center;
}

#navigation li {
	display: inline-block;
}

a:link, a:visited {
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #CC6699;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #4D8B4D;
}
#footer {
   position: relative;
   margin: 5px;
   padding: 5px;
   height: 60px;
   background-color: #6cf;
   border: 2px solid black;
}

`<!DOCTYPE html>
<html>
  <head>
    <title>Writer's Toolbox</title>
    <link rel="stylesheet" type="text/css" href="writerstoolbox.css" />
  </head> 

  <body>
    <div id="headerimg">
      <img src="logo.jpg" alt="Writer's Toolbox header image" />
	 </div> 

	<div id="header"> <h1> Writer's Toolbox</h1><h3>All of your writing needs in one place </h3></div>
	
	<div id="sidebar">
      <h3 class="sideheading">
        <!-- <img src="" alt="" /> -->
        <br />
        What are you looking for?
      </h3>
	  <p><a href="names.html">Names</a><br>Settings<br>Character Traits<br>Mary Sue Test<br>Plot ideas<br>Title ideas<br>Writing Tips<br>Resources</p>
	 </div>
	 
	<div id="content">
	<h3 id="name">'A' Names</h3><br>
		<table id="tablename">
			<tr>
				<th>Names</th>
				<th>Alternate Spelling</th>
				<th>Gender </th>
				<th>Origin</th>
				<th>Meaning</th>
			</tr>
			<tr class="male">
				<td>Aaron</td>
				<td>Arron, Aaren</td>
				<td>m</td>
				<td>Hebrew</td>
				<td>Exalted, strong</td>
			</tr>
			<tr class="male">
				<td>Abbott</td>
				<td>Abbot</td>
				<td>m</td>
				<td>English</td>
				<td>Head of a monastery</td>
		</table>
		</div>
		
	<footer id="footer"> 
		<ul id="navigation">
			<li><a href="writerstoolbox.html">Homepage</a></li>
			<li> | </li>
			<li><a href="names.html">Back to Names</a></li>
		</ul>
	</footer>`

Answer 1

你对地球造型有一些问题，比如把桌子和它的元素放在一起这里的任何方式都是js小提琴的解决方案 http://jsfiddle.net/phonexdoda/ze6dddoh/

我将#content样式更改为

#content {
    width: 1020px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

添加$ tablename样式

#tablename{
   margin: auto; 
}

并持续使用表格样式

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    padding: 5px;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

和#name

#name {
    text-align: center;
    vertical-align: middle;
    position: relative;
}

页脚需要这个

#footer {
    position: relative;
    clear: both;
    margin: 5px;
    padding: 5px;
    height: 60px;
    background-color: #6cf;
    border: 2px solid black;
}

Answer 2

如果您在text-align: center;课程中使用vertical-align: middle;和content，则会尝试将div的内容格式化为这些属性。这些不适用于实际的div本身。

在content div周围创建一个新的div，例如content_container，并将text-align: center;和vertical-align: middle;应用于该类。

这会使您的content div居中并垂直对齐。

以div为中心;不知道该怎么办

2 个答案: