CSS導航菜單水平居中的多種方法
作者：佚名 時間：2014-11-04 分享到：
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>
<ul>
<li><a href="http://www.ktcbnqb.cn">首頁</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>
<div>
<ul>
<li><a href="http://www.ktcbnqb.cn">首頁</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>
<li><a href="http://www.ktcbnqb.cn">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>
<ul>
<li><a href="http://www.ktcbnqb.cn">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>
<ul>
<li><a href="http://www.ktcbnqb.cn">首頁</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這些較新的瀏覽器。
寫在最后，介紹了這么多方法，每種方法都有不同的好壞，這些視項目情況而定，對于我來說，「display:inline-block」是比較適合大眾化的，因為它兼容性比較好嘛！
