仿站

在网站页面制作中让网站导航水平居中是很常见的，其实现方法非常的多，但是大多数会存在不兼容的问题，同时基于大多数朋友还不知道哪种让网站导航居中的方法兼容性好，或有的朋友朋友想多了解一些让网站导航居中的方法，以备在制作网站导航时随心所欲，所以在今天的内容中，济南网页制作公司（仿站网网络）的技术人员将为大家汇总了几种好用的实现网站导航水平居中的方法，以下是详细的实例操作。

第一种方法：使用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编写有助于后期的修改，极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中，小编还将会继续为朋友们分享更多更有价值的知识。