一级毛片视频在线观看|人人搡人人爽国产精品|国产成人精品一区二区3|人妻无码中文专区久久综合|亚洲一区二区制服无码中文|一区二区三区国产亚洲网站|成人久久精品一区二区三区网|亚洲国产AⅤ精品一区二区影院

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

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

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

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

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

方法二：使用position:relative解決

position:relative定位方法來讓元素水平居中，一般來說小編推薦這方法，因為代碼多了個div去包住，當然這些是根據(jù)情況來使用的。將定位div設為浮動，再定位left:50%,然后導航定位至left:-50%。

方法三：使用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;
}

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

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瀏覽器。

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

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

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