无法在页脚上方中心信息联系信息

时间:2015-01-06 09:23:01

标签: html css html-table alignment zoom

我已经尝试了一切我能想到的将联系信息集中在页脚上方,但我能得到的最接近的是这个。此代码使表格从页面的50%开始,但我希望表格的中心位于页面的50%。我可以这样做,但我发现在放大和缩小时保持相同的缩放比例(例如底部的版权条)是不可能这样做的。谢谢你的耐心等待。

这是我的相关CSS代码

#push{height:80px}

#footer{
padding:0px 0px 0px 0px;
border-top:0px solid #dadada; width:100%;
 margin:0px 0px 0px 0px;
 color:#583625;}

#footer p{
position:absolute;
font-size:1em; color:#4d4d4d; 
line-height:1.5em; margin-bottom:0; 
margin-top:0.6em;
background-color:#6A412D;
width:100%;
}

.copyrightbar {
margin: 0px 0px 0px 0px;
border-collapse: collapse;
border: 0px;
padding: 0px 0px 0px 0px;
}
.copyrightbar2 {
margin: -100px 0px 0px 50%;
border: 0px;
padding: 0px 0px 0px 0px;
position:absolute;
}

这是我的HTML代码

<div class="copyrightbar2">
 <table>
   <tr>
      <td>
        <p>
          <font color="white">Phone: <a href="tel:1800888888" style="text-decoration:none">18008888888</a><br>Fax:1-800-888-88888<br>
          USA:<a href="tel:8002556214" style="text-decoration:none">1-800-255-6214</a><br>
          Canada:<a href="tel:8002556214" style="text-decoration:none">1-800-255-6214</a> &nbsp</br>
          </font>
        </p>        
     </td>
     <td>
        <p>
          <font color="white"> 
            Company<br>Sydney Australia<br>
          </font>
            <a href="https://imgur.com" style="text-decoration:none"> <font color="white"> Emailaddress@email.com</a>
        </p>
     </td></tr>
</table>
</div>
<div class="copyrightbar" id="footer">
        <p align="center">
       <font color="white" font size="2">
             <i>All Rights Reserved. </i>
       </font>
    </p>
    <div class="push"></div>

1 个答案:

答案 0 :(得分:1)

我用你的代码创造了一个小提琴。注意你的HTML结构。你没有关闭每个标签。

始终关闭您打开的每个HTML代码!

要移动页面底部的div,请将position:absolute;bottom:0;添加到您的css文件中。更多信息 here

要将div居中,您可以使用margin:auto;。这些链接可能会对您有所帮助:

http://www.w3schools.com/css/css_align.asp
http://www.w3schools.com/css/css_margin.asp

我更新了你的代码并将其粘贴到一个小提琴中。如果您有任何其他问题,请随时询问:)

<强> jsFiddle Demo