0

良い一日

テキストをdivの中央に揃えたい。text-align を使用すると簡単です。親 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、親に使用しないでください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 に答える