1

我已经安静地搜索了一下,发现了很多我测试过的 CSS,但是 margin: 0 auto; 没有工作和。我不能让我的页脚保持在中心和底部。我可以让它到底部,我可以让它居中,但不能两者兼而有之。

这是HTML

<div align="center">    
    <table class="copyrightbar">    
        <tr>
            <td class="noborder">
                <img  class="ledge" src="images\lefthalfcircle.png">
            </td>
            <td class="noborder" >
            <img class="copyrightimg" src="images\copyright.png">
            </td>
            <td class="noborder">
                <img class="redge" src="images\righthalfcircle.png">
            </td>
        </tr>
    </table>
</div>  

这是CSS

.copyrightbar
{
   border-collapse: collapse;
   border: 0px;
   padding: 0px;
   float: left;
   position: fixed;
   bottom: 10px;
   display:block;
}

我不确定为什么它不会保持居中或我做错了什么。现在,薄设置为仅停留在底部。

4

4 回答 4

2

试试这个jsfiddle

我知道图像实际上并没有显示,但它应该按您的需要显示。

HTML:

<div class="wrapper">    
    <table class="copyrightbar">    
        <tr>
            <td class="noborder">
                <img  class="ledge" src="images\lefthalfcircle.png">
            </td>
            <td class="noborder" >
                <img class="copyrightimg" src="images\copyright.png">
            </td>
            <td class="noborder">
                <img class="redge" src="images\righthalfcircle.png">
            </td>
        </tr>
    </table>
</div>​

CSS:

.wrapper {
    position: fixed;
    bottom: 10px;
    width: 100%;
}    

.copyrightbar {
   margin: 0 auto;
   border-collapse: collapse;
   border: 0px;
   padding: 0px;
}

​</p>

于 2012-10-08T23:05:31.283 回答
1

使用 float:left 有什么意义?如果您希望它居中,则将整个元素浮动到左侧没有任何意义,因为它与您想要的完全相反。

但是,如果你想保留它,那么你的包装器 div 应该被赋予一个 id,让我们说 id="footer" 然后使用这个 css

#footer {
    width:400px (not sure if that is too wide or not, you can play around with it until it is the right width)
    margin: 0 auto;
}
于 2012-10-08T23:19:42.657 回答
0

将类或 ID 添加到包装器 div。然后使用 CSS 使用 `position: fixed' 将其放置在底部。

然后在您的表格上设置一个宽度(通过 CSS)并使用margin: 0 auto您上面提到的声明。(哦,从桌子上删除position: fixed

于 2012-10-08T22:58:27.410 回答
0

可能是因为你的 CSS 文件有 { float: left; }?

于 2012-10-08T23:02:36.087 回答