DEMO

Question

我正在努力使用我的网站，我正试图让底部的div进入中心。主要文本部分的中心和显示很好，它只是文本在中心对齐的页脚。有没有人知道我做错了什么？

这是我的css代码。

#footer{
float: left;
width: 100%;
height: 100px;
background-image: url(images/jf_footer.png);
color: #C7C7C7;
font-size: 0.75em;


}

#footercontainer{
width: 960px;
margin:0px auto;
margin-top: 20px;
}

#footertext{
float: left;
text-align:center;
margin-top: 15px;
color: #C7C7C7;
font-size: 1em;
}

#footerlinks{
float: left;    
}

HTML：

<div id="footer">
    <div id="footercontainer">
        <div id="footertext">Copyright NV Blinds 2012</div>
        <div id="footerlinks">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>The Collections</li>
                <li>Distributors</li>
                <li>Our Team</li>
                <li>Contact</li>
             </ul>
        </div>
    </div>
</div>

Answer 1

不确定您的HTML，但我想这可能是因为您在页脚相关样式中使用了float：left。

我认为你没有在中心对齐文字的主要原因是使用浮动容器（div）将使它们的宽度等于内容，但不是100％。

因此，text-align（仅对链接，跨度，输入等内联元素有效）无法对齐中心的内容，因为它已经占据了完整的大小。

我想问题就在这里：使用float：left with text-align：

#footertext{
  float: left;
  text-align:center;
}

Answer 2

很难猜到你究竟在寻找什么..我已逐点对齐链接，而#footerContainer位于中心 - 如果窗口大小超过{{{}，您可以检查它1}} ..好吧，足够说 - 检查演示

DEMO

Answer 3

请参阅下面的CSS以及笔记。我已经包含了你需要的最低限度，以达到我认为你想要的效果。（如果您希望#footertext和#footerlinks位于同一行，只需将display:inline添加到两个ID。

#footer {
    width: 100%;
}

#footercontainer{ /* corrected spelling to match HTML id */
    width: 960px;
    margin: 0px auto; /* horizontally centers div */
}

#footertext{
    text-align: center; /* horizontally center text */
}

#footerlinks{
    text-align: center; /* horizontally center text */
}

#footerlinks ul {
    list-style: none; /* remove bullets from list */
}
#footerlinks ul li {
    display: inline; /* make li elements inline */
}

以CSS为中心的Div

3 个答案:

DEMO