css - 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 来显示：块。

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

Answer 5

您需要将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/