0

再会

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

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

看我的小提琴：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/

注意：我使用的是流体布局，所以固定填充等不起作用

谢谢

4

2 回答 2

2

在将容器margin:0 auto的宽度设置为特定大小（如width:400px. 然后使用 . 分别对齐每个元素text-align。

看这个演示：http: //jsfiddle.net/DvXzB/16/

如果你希望你的容器有 100% 的宽度，那么不要使用text-align:center你的 parent div。相反，使用width:100%（可选）并text-align根据需要再次使用每个块。

于 2013-02-18T11:42:37.617 回答
1

您必须使用包装器div 来包含所有内容。我做了一个JsFiddle，我认为这就是你要找的:)

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

除此之外，您可以将 a 对齐<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>
于 2013-02-18T11:46:18.847 回答