无法在页脚上方居中信息联系信息答案

【问题标题】：Cannot center info contact info above footer无法在页脚上方居中信息联系信息
【发布时间】：2015-03-03 22:32:12
【问题描述】：

我已经尝试了所有我能想到的将联系信息置于页脚上方的中心，但我能得到的最接近的是这个。此代码使表格从页面的 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>

【问题讨论】：

你能提供一个jsFiddle吗？ :)
摆弄 jsfiddle。我以前从未使用过它。不过看起来很方便
好的，我用你的代码创建了一个。您希望结果如何？ :)
imgur.com/a/qSia4 第一个图像是我想要的，第二个是我拥有的（注意我改变了字符）。
see this 用于居中

标签： html css html-table alignment zooming

【解决方案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

【讨论】：