css - 对齐文本居中然后左对齐

Question

美好的一天

我想在 div 的中心对齐文本。现在使用 text-align: center on parent div 就很容易了。

但是如果我想将 div 内的文本左对齐到居中 div 的左侧，我该怎么做呢？

查看我的 fiddle :http://jsfiddle.net/DvXzB/5/

HTML:

<div id="aboutContent" class="row-fluid">
    <div id="aboutHeaderText" class="span12"><span title="">About Us</span></div>
    <div id="aboutHeaderBody" class="span12">
        <p><a title="">asdasd</a> is a free mobile application available for <a href="#"
            title="">iOS</a>, <a href="#" title="">Android</a>and the <a href="#" title="">Blackberry</a> operating
            systems.</p>
        <p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
            l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p>
        <div id="cities"><a title="">asdasdasd</a> currently only displays events and
            specials in <strong>asdasd</strong> (our hometown), but the following locations
            will be available before you know it:
            <ul>
                <li><span>asdg</span>

                </li>
                <li><span>asdwn</span>

                </li>
                <li><span>Pasdasdroom</span>

                </li>
                <li><span>Dasdaf</span>

                </li>
                <li><span>Bergrin</span>

                </li>
                <li><span>Sersch</span>

                </li>
                <li><span>Graergwn</span>

                </li>
            </ul>
        </div>
        <p>Visit our <a href="" title="" target="_blank">Facebook page</a> for more
            up to date information, and feel free to <a href="" title="">contact us</a> with
            any queries.</p>
        <br />
    </div>
</div>

CSS:

#aboutContent {
    color: #222;
    margin-top: 50px;
    margin: 0 auto;
    text-align: center;
}
#aboutHeaderText span {
    font-family:"Kozuka Gothic Pr6N", sans-serif !important;
    color: #eeeeee;
    font-size: 26px;
    font-weight: bold;
}
#aboutHeaderText img {
    margin-top: -18px;
    margin-left: 8px;
}
#aboutHeaderBody {
    position: relative;
    padding: 0px;
    font-size: 16px;
}
#cities ul {
    list-style: none;
    margin-top: 10px;
}
#cities ul li {
    font-family:'Open Sans', sand-serif;
    padding: 3px 0px;
    font-size: 20px;
    color: #222;
}

我希望页面中间的文本对齐，但是当我对齐或左对齐时，它再次将其对齐到绝对左侧。在不使用固定填充或边距的情况下如何做到这一点？基本上我想要的是他们在此页面上的内容(请参阅“关于我们”部分):http://www.villagebicycle.co.za/

注意:我使用的是流动布局，因此固定填充等将不起作用

谢谢

Answer 1

在将其宽度设置为特定大小(如 width:400px)后，您需要将容器与 margin:0 auto 居中对齐。然后使用 text-align 分别对齐每个元素。

查看此演示:http://jsfiddle.net/DvXzB/16/

如果您希望您的容器具有 100% 的宽度，那么不要对您的父级 div 使用 text-align:center。相反，请使用 width:100%(可选)并根据需要对每个 block 再次使用 text-align。