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/