页脚不会居中

Question

I'mkind of knew so I have no idea if I'm formatting this correctly, but my question is: How do center the footer to the middle of the page (vertically of course)? 我有点知道，所以我不知道是否正确设置了格式，但是我的问题是：如何将页脚居中到页面中间（当然是垂直的）？

<!-- 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

Now its centered , Tested 现在它居中，经过测试

<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

remove " 去掉 ”

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

" from body 来自身体

You should use margin auto for center. 您应使用保证金自动设置中心。

add in body 加入身体

" margin: 0 auto; " “ margin: 0 auto; ”

Answer 3

there are several method to vertically center .. here is one of them. 有几种方法可以vertically center ..这是其中一种。 Check the DEMO first. 首先检查演示。

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

Use <center> tag 使用<center>标签

Link: JSFiddle 链接： 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 个解决方案

解决方案1
0 2014-05-27 06:55:50

解决方案2
0 2014-05-27 06:59:30

解决方案3
0 已采纳 2014-05-27 07:01:54

解决方案4
0 2014-05-27 07:03:10

页脚不会居中

问题描述

4 个解决方案

解决方案1 0 2014-05-27 06:55:50

解决方案2 0 2014-05-27 06:59:30

解决方案3 0 已采纳 2014-05-27 07:01:54

解决方案4 0 2014-05-27 07:03:10

解决方案1
0 2014-05-27 06:55:50

解决方案2
0 2014-05-27 06:59:30

解决方案3
0 已采纳 2014-05-27 07:01:54

解决方案4
0 2014-05-27 07:03:10