Question

我知道，所以我不知道我是否正确格式化，但我的问题是：如何将页脚居中到页面的中间（当然是垂直的）？

<!-- Header & footer-->
 <header>
 <style type="text/css">
  body {
  font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
 margin-top:0px;
 margin-bottom:0px;
margin-right:0px;
margin-left:400px;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style> 
</header>

<footer><table align="center">
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax:         555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State         zip<br>
  <a href="mailto:emailadress@host" style="text-decoration:none"> <font color="white">     email adress</a></p></font></td></tr>
  </table><table align="center">
  <tr><td><p class="padding"><font color="white" font size="2"> copy write 2014     yatayata </tr></td>
 </table> </footer>
</html>

Answer 1

现在居中，经过测试

<header>
 <style type="text/css">
  body {
  font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
 margin: 0 auto;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style> 
</header>

<footer><table align="center">
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax:         555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State         zip<br>
  <a href="mailto:emailadress@host" style="text-decoration:none"> <font color="white">     email adress</a></p></font></td></tr>
  </table><table align="center">
  <tr><td><p class="padding"><font color="white" font size="2"> copy write 2014     yatayata </tr></td>
 </table> </footer>
</html>

Answer 2

删除 “

margin-right:0px;
margin-left:400px;
margin-top:0px;
margin-bottom:0px;

” 从身体

您应该使用margin auto作为中心。

添加正文

“margin: 0 auto;”

Answer 3

vertically center有几种方法..这是其中之一。首先检查 DEMO 。

html, body {
    width:100%;
    height:100%;
}
html {display:table;}

body {
    display:table-cell;
    vertical-align:middle;
   font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}

Answer 4

使用<center>代码

链接：JSFiddle

<html>
<style>
  body {
  font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
 margin-top:0px;
 margin-bottom:0px;
margin-right:0px;
margin-left:0px;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>

<body>
<footer>
  <center>  
<table align='center'>
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax:         555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State         zip<br>
  <a href="mailto:emailadress@host" style="text-decoration:none"> <font color="white">     email adress</a></p></font></td></tr>
  </table><table align="center">
  <tr><td><p class="padding"><font color="white" font size="2"> copy write 2014     yatayata </tr></td>
 </table>  
    </center>
    </footer>

</body>

</html>

页脚不会居中

4 个答案: