Question

美好的一天

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

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

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

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

请参阅此演示：http://jsfiddle.net/DvXzB/16/

如果您希望容器的宽度为100％，请不要将text-align:center用于您的父div。相反，根据需要使用width:100%（可选）和每个块text-align。

Answer 2

您必须使用包装器 div来包含所有内容。我做了JsFiddle,我认为你正在寻找的东西：）

.wraper {
    position: relative;
    width: 500px;
    margin:0 auto;   
}

如你所见，你可以将<p>左右对齐，对齐等等：

    p.left{text-align:left;}
    p.justify{text-align:justify;}

用于测试的HTML：

<div class="wraper">
        <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

    <p class="justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

</div>

对齐文本中心然后向左

2 个答案: