在网站页面制作中让网站导航水平居中是很常见的，其实现方法非常的多，但是大多数会存在不兼容的问题，同时基于大多数朋友还不知道哪种让网站导航居中的方法兼容性好，或有的朋友朋友想多了解一些让网站导航居中的方法，以备在制作网站导航时随心所欲，所以在今天的内容中，小编将为大家汇总了几种好用的实现网站导航水平居中的方法，以下是详细的实例操作。
实现网站导航水平居中
第一种方法：使用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编写有助于后期的修改，极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中，小编还将会继续为朋友们分享更多更有价值的知识。
冀公网安备 13100302000566号
Sitemap地图 网站地图 Rss订阅