Question

美好的一天

我的CSS日很糟糕。我有3列div（水平，这就是为什么我使用浮点数），但我想在中心对齐我的文本，但是在包含列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>元素将父<ul>宽度拉伸至100％，因此使用{{1}不会起作用。

相反，我建议您使用margin: 0 auto作为display: inline-block - 允许它只延伸到内容的宽度（子<ul>元素），而不是包含元素的100％宽度。

对于子<li>，您可以将它们设置为显示为块元素，将它们浮动到左侧，然后清除左浮动，从而强制每个浮动元素在新行上启动（因为您清除每个元素的左浮点数。）

只需实施以下建议的风格：

<li>

在这里查看小提琴;）http://jsfiddle.net/teddyrised/DvXzB/48/

Answer 2

在footerColumn div中使用text-align:center。

   #footer div.footerColumn {
        position: relative;
        float: left;
        width: 33%;
        margin: 0 auto;
        text-align: center;
    }

Answer 3

#footer div.footerColumn {
    position: relative;
    float: left;
    width: 33%;
    margin: 0 auto;
    text-align: center; /*new here*/
}
#footer div.footerColumn ul {
float: left; /*new here*/
}

文本未对齐中心，左侧

3 个答案: