css - 文本未对齐居中，左侧

Question

美好的一天

我今天的 CSS 很糟糕。我有 3 列 div(水平，这就是我使用 float 的原因)，但我想将我的文本居中对齐，但在包含列 div 的左侧。

HTML:

 <div id="footer">
        <div class="footerColumn">
            <ul>
                <li><a>Contact Us</a></li>
                <li><a>Home</a></li>
                <li><a>Emergency Numbers</a></li>
            </ul>
        </div>
        <div class="footerColumn">
            <ul>
                <li><a>Support</a></li>
                <li><a>Privacy Policy</a></li>
                <li><a>Terms of Use</a></li>
                <li><a>Careers</a></li>
            </ul>
        </div>
        <div class="footerColumn">
            <ul>
                <li><p><a>login</a></p></li>
                <li><a>Sign Up</a></li>
            </ul>
        </div>
        <div style="clear: both;"></div>

 </div>

CSS:

#footer {
    width: 960px;
    margin: 0 auto;
    padding: 10px;
    background: url('/images/bg2.png') repeat-x center;

    border-top: 6px solid #f3911f;
    background: #1b1d21;
}
    #footer div.footerColumn {
        position: relative;
        float: left;
        width: 33%;
        margin: 0 auto;
        text-align: justify;
    }
    #footer div.footerColumn ul li {

    }
    #footer ul li a{
        color: #fff;           
        font-family: Arial, sans-serif;
        font-size: 14px;
        text-decoration: none;
        cursor: pointer;       
    }
    #footer div.disclaimer {
        color: #ccc;
        font-family: verdana, Arial, sans-serif;
        font-size: 12px;

    }

查看我的FIDDLE

谢谢

Answer 1

无法将 <ul> 居中的原因您设计中的元素是因为 <li>元素正在拉伸(stretch)父元素 <ul>宽度为 100%，因此使用 margin: 0 auto将不起作用。

相反，我建议您使用 display: inline-block为你的<ul> - 允许它只拉伸(stretch)到内部内容的宽度(子 <li> 元素)，而不是包含元素的 100% 宽度。

至于 child <li> ，您可以将它们设置为显示为 block 元素，将它们 float 到左侧，然后清除左侧 float ，因此强制每个 float 元素在新行上开始(因为您清除了每个元素的左侧 float )。

简单地实现建议的样式如下:

#footer ul {
    display: inline-block;
    overflow: hidden;
}
#footer ul li {
    display: block;
    float: left;
    clear: left;
}
#footer ul li a{
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;       
}

检查这里的 fiddle ;) http://jsfiddle.net/teddyrised/DvXzB/48/