CSS导航菜单水平居中的多种方法

在网页设计中，水平导航菜单使用是十分普遍的，在CSS样式中，咱们通常会用Float元素或是「display:inline-block」来解决。而今天主要讲解如何让未知宽度的元素居中，下面咱们会列出几种方法来解决水平居中问题。固然这些方法不必定是用来解决导航菜单问题，还有其它相似状况也是可使用的。

在线演示：Demo

CSS导航菜单水平居中的多种方法：

• 方法1：display:inline-block
• 方法2：position:relative
• 方法3：display:table
• 方法4：display:inline-flex
• 方法5：width:fit-content / width:intrinsic

方法1：display:inline-block

这个方法比较简单，是将容器转成「display:inline-block」行内块级元素，而后就能够直接用「text-align:center」使其达到水平居中效果。

HTML代码：

这里咱们须要一个div来包围这个导航菜单。

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

CSS代码：

给外面的div添加「text-align:center」，而后将菜单容器设成「display:inline-block」行内块级元素，菜单浮左「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这些较新的浏览器。

 

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

 

写在最后：方法1：display:inline-block 简单易懂。