实现网站导航水平居中的方法汇总
在网站页面制作中让网站导航水平居中是很常见的，其实现方法非常的多，但是大多数会存在不兼容的问题，同时基于大多数朋友还不知道哪种让网站导航居中的方法兼容性好，或有的朋友朋友想多了解一些让网站导航居中的方法，以备在制作网站导航时随心所欲，所以在今天的内容中，成都网页制作公司（速优网络）的技术人员将为大家汇总了几种好用的实现网站导航水平居中的方法，以下是详细的实例操作。
第一种方法：使用display:table解决
HTML代码实例
CSS代码实例
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
方法四：使用display:inline-flex解决
HTML代码实例操作
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编写有助于后期的修改，极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中，小编还将会继续为朋友们分享更多更有价值的知识。
以上就是速优网络和大家分享的"实现网站导航水平居中的方法汇总 ",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。
TAG标签：
