网站建设咨询  网站推广咨询  网站优化咨询  网站售后咨询   电话:0316-5269510 客服:13722605112  13315631884

公司邮箱:sjfc2008@126.comsjfc2008@126.com  技术邮箱:sjfc2009@163.comsjfc2009@163.com  网站售后邮箱:e-wkj.cn@tom.come-wkj.cn@tom.com   24小时服务热线:13722605112
导航头部 网站首页 网站制作 网站推广 建站方案 推广方案 业务介绍 网站案例 技术服务 关于我们 联系我们 导航尾部
主要为用户提供网站建设和网站推广服务
建站知识

多种方法来实现网站导航水平居中

来 源:畅想网络  作 者:小 编  发布时间:2016-8-12

在今天的内容中,廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法,其实办法有很多,以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编写有助于后期的修改,极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中,小编还将会继续为朋友们分享更多更有价值的知识。

上一篇:网站页面设计美需要在哪些方面体现 下一篇:友情链接在网站制作中起到什么作用

廊坊市新世纪步行街畅想网络技术服务中心历经多年的发展,现拥有一个过硬的技术团队,凭借丰富的廊坊网站建设,网站制作经验赢得了众多用户信任,真正站在客户角度去考虑问题。我们始终坚持新产品的研发,每一款不同的产品有他独特的功能,完全可以帮助大家快速树立起自己的品牌形象。

在以后的工作中廊坊网络公司的技术人员将继续依靠技术优势、优质的产品去服务用户,同时也会继续开发方便、可靠的产品。坚持不懈,认真思考,独具创新是我们必须坚持的,只有这样才能有更好的发展。(详细介绍

优惠活动
网站底部

廊坊市新世纪步行街畅想网络技术服务中心 TEL:0316-5269510 技术支持:13722605112 E-MAIL:sjfc2008@126.com 冀ICP备11000020号 网站地图  

互联网信任计划       网站安全认证       可信网站