欢迎大家来到IT世界,在知识的湖畔探索吧!
在今天的内容中,廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法,其实办法有很多,以CSS代码为例,这种代码操作很方便,后期修改的时候也简单,以下是详细的实例操作。
方法一:使用display:inline-block控制
这个方法比较简单,是将容器转成display:inline-block行内块级元素,然后就可以直接用text-align:center使其达到水平居中效果。HTML代码中需要一个div来包围这个导航菜单。
方法二:使用position:relative解决
position:relative定位方法来让元素水平居中,一般来说小编推荐这方法,因为代码多了个div去包住,当然这些是根据情况来使用的。将定位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浏览器。
其实这些方法很好的解决了网站导航菜单居中的问题,使用CSS编写有助于后期的修改,极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中,小编还将会继续为朋友们分享更多更有价值的知识。
原创文章出自畅想网络,转载地址:http://www.e-wkj.cn/xw/2316.html
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/99940.html