CSS中的水平居中菜單？

Question

我想制作一個水平居中菜單。 我試過使用諸如文本居中對齊和邊距自動等功能，但無法使它們正常工作。 我不想使用表格。

這是我的代碼：

<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

參見http://jsfiddle.net/aCSgz/

基本上，您需要將ul和li設置為display：block。

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

Answer 5

您需要將LI上的display屬性設置為inline-block ，並將UL上的text-align設置為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/