CSS导航菜单⽔平居中的多种⽅法
CSS导航菜单⽔平居中的多种⽅法
在⽹页设计中，⽔平导航菜单使⽤是⼗分⼴泛的，在CSS样式中，我们⼀般会⽤Float元素或是「display:inline-block」来解决。⽽今天主要讲解如何让未知宽度的元素居中，下⾯我们会列出⼏种⽅法来解决⽔平居中问题。当然这些⽅法不⼀定是⽤来解决导航菜单问题，还有其它类似情况也是可以使⽤的。
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这些较新的浏览器。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。