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％左侧（将其移回其宽度的左半部分，以便菜单的中心位于页面的中心）。

其他东西只是化妆品。

See working example

Answer 3

Demo

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

Answer 4

请参阅http://jsfiddle.net/aCSgz/

基本上你需要设置ul和li来显示：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/

CSS中的水平居中菜单？

5 个答案: