CSS導(dǎo)航菜單水平居中的多種方法

CSS導(dǎo)航菜單水平居中的多種方法：

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

方法1：display:inline-block

這個(gè)方法比較簡(jiǎn)單，是將容器轉(zhuǎn)成「display:inline-block」行內(nèi)塊級(jí)元素，然后就可以直接用「text-align:center」使其達(dá)到水平居中效果。

HTML代碼：

這里我們需要一個(gè)div來包圍這個(gè)導(dǎo)航菜單。

<div class="navbar">
<ul>
<li><a href="/">首頁(yè)</a></li>
…
</ul>
</div>

CSS代碼：

給外面的div添加「text-align:center」，然后將菜單容器設(shè)成「display:inline-block」行內(nèi)塊級(jí)元素，菜單浮左「float:left」

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

這里瀏覽器兼容只能是IE8或更高版本，所以如果要兼容IE7的話，請(qǐng)加入以下代碼

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

方法2：position:relative

這是使用「position:relative」定位方法來讓元素水平居中，我不是很推薦這方法，因?yàn)榇a多了個(gè)div去包住，當(dāng)然這些是根據(jù)情況來使用的。

HTML代碼：

<div class="navbar">
<div>
<ul>
<li><a href="/">首頁(yè)</a></li>
…
</ul>
</div>
</div>

CSS代碼：
將定位div設(shè)為浮動(dòng)，再定位「left:50%」,然后導(dǎo)航定位至「left:-50%」，這方法很有意思吧。可能表達(dá)不是很清楚，自己看代碼吧^^

.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，請(qǐng)?zhí)砑右韵聵邮剑?/p>

.navbar {
position:relative;
}

方法3：display:table

如果你喜歡簡(jiǎn)潔的代碼，哪么這個(gè)方法就非常適合你了。

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

瀏覽器兼容：這方法代碼精簡(jiǎn)，但不支持IE7及以下版本……
方法4：display:inline-flex

有關(guān)flex layout的知識(shí)自己查下吧>_<

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="/">首頁(yè)</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;
}

瀏覽器兼容：這個(gè)兼容比較低，只支持Firefox或chrome、Opera 12這些較新的瀏覽器。

寫在最后，介紹了這么多方法，每種方法都有不同的好壞，這些視項(xiàng)目情況而定，對(duì)于我來說，「display:inline-block」是比較適合大眾化的，因?yàn)樗嫒菪员容^好嘛！

文章名稱：CSS導(dǎo)航菜單水平居中的多種方法
文章出自：http://m.kartarina.com/news18/292318.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、定制網(wǎng)站、企業(yè)建站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)