CSS CSS中的水平居中菜单？

Horizontal Centered Menu in CSS?

提问by panthro

I want to make a horizontal centered menu. I have tried using things like text align center and margin auto but can't get them to work. I do not want to use a table.

我想做一个水平居中的菜单。我试过使用文本对齐中心和自动边距之类的东西，但无法让它们工作。我不想使用桌子。

Here's my code:

这是我的代码：

<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>

回答by Kaloyan

With the provided HTML:

使用提供的 HTML：

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

http://jsfiddle.net/NpLR3/

http://jsfiddle.net/NpLR3/

回答by Derek Henderson

The following will work without using text-align:

以下将在不使用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;
}

The important bits are:

重要的位是：

(1) that the outer container for the menu has 100% width,

(1) 菜单的外部容器具有 100% 的宽度，

(2) that the inner container is absolutely positioned at 50% left (which positions the left side of the menu at the center of the page), and

(2) 内部容器绝对定位在 50% 左侧（将菜单左侧定位在页面中央），以及

(3) that the menu is then relatively positioned at -50% left (moving it back to the left half its width, so that the center of the menu is now at the center of the page).

(3) 然后将菜单相对定位在 -50% 左侧（将其移回左侧一半的宽度，以便菜单的中心现在位于页面的中心）。

The other stuff is just cosmetic.

其他的东西只是化妆品。

See working example.

请参阅工作示例。

回答by panthro

You need to set the displayproperty on the LIs to inline-blockand set the text-alignon the UL to center.

您需要display将 LI 上的属性inline-block设置为text-align并将 UL 上的设置为center。

HTML:

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:

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/

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

回答by Rajender Joshi

Demo

演示

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

回答by andrewb

See http://jsfiddle.net/aCSgz/

见http://jsfiddle.net/aCSgz/

Basically you need to set the ul and li to display: block.

基本上你需要设置 ul 和 li 来显示：块。

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