css - CSSの水平中央メニュー?

Question

横中央のメニューを作りたいです。text align center や margin auto などを使用してみましたが、機能しません。テーブルは使いたくない。

これが私のコードです：

<footer class="container">
    <div class="row">
        <div class="span12">
            <ul>
                <li>footer info 1</li>
                <li>footer info 2</li>
                <li>footer info 3</li>
            </ul>
        </div>
    </div>

Answer 1

提供された HTML を使用すると、次のようになります。

ul { text-align: center; }
li { display: inline-block; } /* Don't float them */

http://jsfiddle.net/NpLR3/

Answer 2

以下は、を使用せずにtext-align機能します。

footer {
    width: 100%;
}
.row {
    position: absolute;
    left: 50%;
}
.span12 {
    position: relative;
    left: -50%;
}
ul {
    padding: 0;
}
li {
    display: inline;
    list-style: none;
    margin-left: 1em;
}
li:first-child {
    margin-left: 0;
}

重要なビットは次のとおりです。

(1) メニューの外側のコンテナーの幅が 100% であること、

(2) 内側のコンテナーが完全に左の 50% に配置されていること (これにより、メニューの左側がページの中央に配置されます)、および

(3) メニューが相対的に左 -50% に配置されていること (メニューの中心がページの中心になるように、幅の半分の左に移動)。

他のものは単なる化粧品です。

作業例を参照してください。

Answer 3

デモ

.container{
    background:#ddd;
    width: 100%;
    text-align:center;
}
li{
    display: inline-block;
}

Answer 4

displayLI のプロパティを にinline-block設定text-alignし、UL の をに設定する必要がありますcenter。

HTML:

<footer class="container">
    <div class="row">
        <div class="span12">
            <ul>
                <li>footer info 1</li>
                <li>footer info 2</li>
                <li>footer info 3</li>
            </ul>
        </div>
    </div>
</footer>

CSS:

footer {
    background:#fdd;
}
div.row {
    background: #dfd;
}
ul {
    background: #ddf;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

li {
    display: inline-block;
    background: #fff;
    margin: 0.5em;
    padding: 0.5em;
}

http://jsfiddle.net/ghodmode/h2gT3/1/

Answer 5

http://jsfiddle.net/aCSgz/を参照してください

基本的に、ul と li を display: ブロックに設定する必要があります。

ul { display: block; text-align:center; }
ul li { display: block; }