在網站頁面制作中讓網站導航水平居中是很常見的，其實現方法非常的多，但是大多數會存在不兼容的問題，同時基于大多數朋友還不知道哪種讓網站導航居中的方法兼容性好，或有的朋友朋友想多了解一些讓網站導航居中的方法，以備在制作網站導航時隨心所欲，所以在今天的內容中，小編將為大家匯總了幾種好用的實現網站導航水平居中的方法，以下是詳細的實例操作。
實現網站導航水平居中
第一種方法：使用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瀏覽器。
第二種方法：使用position:relative解決
position:relative定位方法來讓元素水平居中，一般來說小編推薦這方法，因為代碼多了個div去包住，當然這些是根據情況來使用的。將定位div設為浮動，再定位left:50%,然后導航定位至left:-50%。
第三種方法：使用display:inline-block控制
這個方法比較簡單，是將容器轉成display:inline-block行內塊級元素，然后就可以直接用text-align:center使其達到水平居中效果。HTML代碼中需要一個div來包圍這個導航菜單。
其實解決網站導航居中的辦法有很多，以上匯總的是常用的CSS代碼為例，這種代碼操作很方便，后期修改的時候也簡單，其實這些方法很好的解決了網站導航菜單居中的問題，使用CSS編寫有助于后期的修改，極大的方便了我們的操作和節(jié)省了寶貴的時間。在以后的內容中，小編還將會繼續(xù)為朋友們分享更多更有價值的知識。
冀公網安備 13100302000566號
Sitemap地圖 ? 網站地圖 Rss訂閱