Multiple ways to center a CSS navigation menu horizontally

In web design, horizontal navigation menus are widely used. In CSS styles, we usually use Float elements or "display:inline-block" to solve them. Today, I mainly explain how to center elements of unknown width. Below we will list several methods to solve the problem of horizontal centering. Of course, these methods are not necessarily used to solve the problem of navigation menus, and other similar situations can also be used.

Online demo:Demo

Multiple ways to center a CSS navigation menu horizontally:

方法1：display:inline-block

This method is relatively simple. It is to convert the container into a "display:inline-block" inline block-level element, and then you can directly use "text-align:center" to achieve the horizontal centering effect.

HTML code:

Here we need a div to surround this navigation menu.

<div class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</div>

CSS code:

Add "text-align:center" to the outer div, then set the menu container to "display:inline-block" inline block-level element, and the menu floats to the left "float:left"

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码

.navbar ul {
    display:inline;
    zoom:1;
}

方法2：position:relative

这是使用「position:relative」定位方法来让元素水平居中，我不是很推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。

HTML代码：

<div class="navbar">
    <div>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </div>
</div>

CSS代码：
将定位div设为浮动，再定位「left:50%」,然后导航定位至「left:-50%」，这方法很有意思吧。可能表达不是很清楚，自己看代码吧^^

.navbar {
    overflow:hidden;
}
.navbar > div {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

如果要兼容IE7，请添加以下样式：

.navbar {
    position:relative;
}

方法3：display:table

如果你喜欢简洁的代码，哪么这个方法就非常适合你了。

HTML代码：

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

CSS代码：

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

浏览器兼容：这方法代码精简，但不支持IE7及以下版本……

方法4：display:inline-flex

有关flex layout的知识自己查下吧>_<

HTML代码：

<div class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</div>

CSS代码：

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

浏览器兼容：不支持IE7及以下版本的IE浏览器。

方法5：width:fit-content

HTML代码：

<div class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</div>

CSS代码：

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

浏览器兼容：这个兼容比较低，只支持Firefox或chrome、Opera 12这些较新的浏览器。

在线演示：Demo →

写在最后

There are so many methods introduced, and each method has different advantages and disadvantages, which depends on the project situation. For me, "display:inline-block" is more suitable for popularization, because it has better compatibility!

http://www.shejidaren.com/css-center-elements-horizontally.html

http://blog.csdn.net/sadfishsc/article/details/7037736