整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今天的内容中，廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法，其实办法有很多，以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
中，是我们编码过程中最常见的，那么，我们平时常见的居中方式，下面一一罗列出来，有错误的地方，望码友多多包涵并加以矫正。
水平居中
1、多块级元素，设置display:inline-block;使之在一行排列,在父级样式里，设置text-align：center;就可以实现水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、内联元素，利用text-align：center;可以实现块级元素内部的内联元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>块级元素中的行内元素的水平居中</span>
</div>
3、块级元素，通过把固定宽高的块级元素的margin-left和margin-right设置为auto，方可实现
div{
width: 100px;
height: 100px;
border: 1px solid;
margin： 0 auto;
}
<div></div>
4、利用弹性盒子（display: flex;）
给父级定宽定高，然后设置display: flex;以及justify-content: center;方可达到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、内联元素（单行）
通过设置元素的height和line-height,方可达到居中效果
2、多行元素，利用表布局（table）
通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align：enter;方可居中
3、弹性盒子（flex）
给父级设置display: flex;变成弹性盒子。
分两种，
（1），主轴方向为水平，直接设置 align-items: center;
（2），主轴方向为垂直，设置flex-direction: column;改变主轴方向，然后设置justify-content: center;
弹性盒模型主轴不同，居中的方式也不同，灵活应用。
4、固定宽高的块级元素
利用父相子绝的定位原理，实现垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知宽高的块级元素
利用transform: translateY(-50%);方可实现
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定宽高
通过margin平移整体宽高的一半，实现水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知宽高
利用transform中的translate()属性实现
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、弹性盒子（flex）
通过display：flex，把父级变成弹性盒模型，利用align-items: center;justify-content: center;方可实现居中。
注意：弹性盒子容器中，多行项目的居中方式另加计算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
随着学习的不断深入，居中方式可以有很多种，我们要善于利用，更加明确什么情况下用怎样的居中方式。
TML ul li 横排居中排列的方法，三步骤及实例
无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：
HTML ul li 横排居中排列的方法，三步骤及实例
将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block，个人比较常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要将ul元素包含于一个div元素，并将div元素的text-align属性设置为center即可将ul水平居中。除此之外，因为ul的列表默认情况下是有左内边距的，所以，为了能够让列表能够更好地水平居中，需要将ul的左内边距padding-left设置为0，具体可见下方的综合实例。
垂直居中方法：为包含ul元素的div元素设置宽度width和高度height（实际上导航条一般也需要有宽度和高度的设置），然后将ul的line-height属性设置为父元素的高度height即可。
将ul元素的list-style属性设置为none即可。
HTML ul li 横排居中排列的方法，三步骤及实例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>HTML ul li 横排居中排列的方法，综合实例在线 - HTML教程
如上代码，一定要将ul的左内边距padding-left设置为0，否则ul列表的“水平居中”将偏向右边，大家可以将.e2中的padding-left删除掉，然后再在线运行看一看效果。
笨鸟工具-璞玉天成，大器晚成
*请认真填写需求信息，我们会在24小时内与您取得联系。
