影音先锋男人av资源站,谁有在线看AV网址,日韩高清一区二区,亚洲色图五月天激情视频,操一操影院,影音先锋每日最新av资源网站天堂

多種方法來實(shí)現(xiàn)網(wǎng)站導(dǎo)航水平居中

來 源：暢想網(wǎng)絡(luò)　 作 者：小 編　 發(fā)布時(shí)間：2016-8-12

在今天的內(nèi)容中，廊坊網(wǎng)站建設(shè)公司的技術(shù)人員將分享下網(wǎng)站導(dǎo)航水平居中設(shè)置的方法，其實(shí)辦法有很多，以CSS代碼為例，這種代碼操作很方便，后期修改的時(shí)候也簡單，以下是詳細(xì)的實(shí)例操作。

方法一：使用display:inline-block控制

這個(gè)方法比較簡單，是將容器轉(zhuǎn)成display:inline-block行內(nèi)塊級(jí)元素，然后就可以直接用text-align:center使其達(dá)到水平居中效果。HTML代碼中需要一個(gè)div來包圍這個(gè)導(dǎo)航菜單。

方法二：使用position:relative解決

position:relative定位方法來讓元素水平居中，一般來說小編推薦這方法，因?yàn)榇a多了個(gè)div去包住，當(dāng)然這些是根據(jù)情況來使用的。將定位div設(shè)為浮動(dòng)，再定位left:50%,然后導(dǎo)航定位至left:-50%。

方法三：使用display:table解決

HTML代碼實(shí)例

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

CSS代碼實(shí)例

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

方法四：使用display:inline-flex解決

HTML代碼實(shí)例操作

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

提示：瀏覽器兼容問題，目前這個(gè)代碼不支持IE7及以下版本的IE瀏覽器。

其實(shí)這些方法很好的解決了網(wǎng)站導(dǎo)航菜單居中的問題，使用CSS編寫有助于后期的修改，極大的方便了我們的操作和節(jié)省了寶貴的時(shí)間。在以后的內(nèi)容中，小編還將會(huì)繼續(xù)為朋友們分享更多更有價(jià)值的知識(shí)。

上一篇：網(wǎng)站頁面設(shè)計(jì)美需要在哪些方面體現(xiàn)

下一篇：友情鏈接在網(wǎng)站制作中起到什么作用