css - 无法将 div 类居中

Question

我试图将页脚放在网站的中心，但由于某种原因，我通常使用的方式这次不起作用。谁能告诉我为什么？

网站在这里

它使用两个类进行设置，一个在另一个类中

第一个称为 mainFoot：

.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}

其次是页脚：

#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}

我在底部小部件的正上方使用相同的结构，它按原样工作，但由于某种原因，当我设置这个时，我必须为外部 div 设置一个 height 属性，因为它不会出现读取内部 div 的高度并进行调整。

作为参考，我提到的类似设置 DOES 工作在 mainFoot 类的正上方，并由 b4Foot 和半小部件类控制：

.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}

.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}

Answer 1

您只需要更改这一行，请参见下文并穿上您的 CSS 并查看结果

.mainFoot
{
    background-color:#184879 !important;
    height:60px;
    width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}

仅更改 .mainFoot 、 footer.span12 和 #page-footer

谢谢，

Answer 2

要使块的内容居中，您需要设置样式“text-align:center”。但是，请注意，您不能在另一个块类型元素中居中一个块类型元素。内部元素需要具有 inline 或 inline-block 的显示样式。

要解决您的问题，您需要：a) 删除固定宽度，b) 将 page-footer 更改为 display:inline-block。目前它是 display:table 因为类 clearfix - 您需要从 div 中删除该类。