整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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删除掉，然后再在线运行看一看效果。
笨鸟工具-璞玉天成，大器晚成
在网页中将 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 属性。以下是一种常用的实现方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Centering</title>
<style>
.center {
width: 300px; /* 设置元素宽度 */
margin: 0 auto; /* 水平居中 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="center">
<p>This element is horizontally centered.</p>
</div>
</body>
</html>
在上面的示例中， center 类的元素使用了 width: 300px; 来设置宽度，然后通过 margin: 0 auto; 来实现水平居中。这样，无论屏幕宽度如何变化，元素都会始终水平居中显示。
您也可以将此样式应用到任何 HTML 元素（例如 div 、 span 、 p 等），以实现水平居中效果。
于html的元素居中其实只有两类居中，一是块元素居中，二是内联元素居中。
内联元素居中使用text-align，块元素居中使用margin。
一、内联元素
内联元素居中，使用原则就是在其父元素上设置text-margin:center。
例如<span>元素居中
网页上显示效果为：
另外<a>标签也是一样
网页上显示效果为：
二、块元素
块元素居中，使用原则就是在需要居中的元素上设置margin:0 auto。
例如<div>元素居中
网页上显示效果为：
另外，如果块元素已经浮动（例如float:left）居中方法
例如已经浮动了的<div>元素
网页上显示效果为：
上面代码意义：
因为已经浮动了的缘故，所以采用margin:0 auto对元素已经不起作用了，所以采用position:relative，然后利用位 置top:50%与left:50%可以将元素居中，但是此时是以元素的左上角为参考点。
实际情况元素向右和向下平移了元素宽度与高度的一半，所以后面还需要加上margin:0 -50px(这个例子高度的一半为50px，以实际情况为准)，如果垂直方向也要居中的话，就将0改为高度一半的相反数。
对前端感兴趣的小伙伴记得关注小编，每天都会更新前端的一些小技巧。没点赞的小伙伴记得点赞收藏哦，谢谢大家！
*请认真填写需求信息，我们会在24小时内与您取得联系。
