4

わかりました..だから私は（私の能力の限り）問題リストでチェックしましたが、同様のものは見つかりませんでした..そこに答えがある場合は、重複を追加することについてお詫びします...

Foundation 4 フレームワークを最新バージョンで使用しています。

多くの場所に弾丸（主にUL）があります。ただし、text-align: center箇条書きのテキストに使用すると、通常のテキストとリストのテキストは中央揃えになりますが、箇条書き自体 (正方形、円盤など) は中央揃えではありません。

奇妙な部分....この問題は、Chrome と IE9/IE10 でのみ発生します。Firefox / Safari では意図したとおりに動作します。.text-centerまた、基本的に同じことを行うクラス（foundation.cssの一部）を使用してみましたtext-align: center.

ここにテストリンクがあります http://www.crevolve.com/testing/ ....

どんな助けでも大歓迎です...ありがとう...

4

2 に答える 2

6

多くの場所に弾丸（主にUL）があります。ただし、箇条書きリストのテキストに text-align: center を使用すると、通常のテキストとリスト テキストは中央揃えになりますが、箇条書き自体 (正方形、円盤など) は中央揃えになりません。

の を設定する必要がありlist-style-positionます。ulデフォルトの値はoutsideです。これは、箇条書きがコンテンツ フローの外側にあることを意味します (詳細については、こちらを参照してください)。

あなたの問題を解決するには、これを行うことができます：

ul.square {
    list-style-position: inside;
    list-style-type: square;          
    text-align:center;
}

しかし、それで問題が完全に解決されるわけではないと思います。なぜなら、テキストの長さが異なるとul、すべてが中央に配置されるからです。つまり、それらは整列されず、見栄えがよくありません。このフィドルの最初のスライドを見て、私が言いたいことを理解してください。

中央に配置して見栄えを良くするには、次の操作を実行できます。

.container {
    float:right;
    position:relative;
    right:50%;
    background-color:lightgreen;
}
.inner-container {
    float:left;
    position:relative;
    left:50%;
    background-color:lightyellow;
}
ul.square {  
    list-style-type: square;              
    width:300px;
}

<div> /* the wrapper div */
    <div class="container"> /* outer container to offset by 50% */
        <div class="inner-container"> /* inner container to make it center */
            <ul class="square">
                <li>First Item</li>
                <li>Second Item, this is a longer text</li>
            </ul>
        </div>
    </div>
</div>

作業サンプルは、サンプリングされた jsfiddle のスライド 2 にあります。どのように機能するかをよりよく理解できるように、背景色を含めました。

于 2013-04-08T02:16:54.940 に答える