- 列表项1
- 列表项2
- 列表项3
首页 >
css中li元素如何居中 |html css 中一点
CSS中li元素如何居中
在网页设计中，大家经常会使用列表来展示信息。而在CSS中，大家可以利用display和text-align属性使列表项(li)实现居中效果。
首先，大家需要将ul元素的display属性设为inline-block，这样才能让ul元素居中。
示例代码如下：
pre{
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
pre code{
font-size: 0.85rem;
}
pre:nth-of-type(2){
position: relative;
}
pre:nth-of-type(2):before{
content: “HTML”;
position: absolute;
top: -20px;
left: 0;
font-size: 0.85rem;
font-weight: bold;
color: #fff;
background-color: #007bff;
padding: 2px 10px;
border-radius: 5px;
}
pre:nth-of-type(3){
position: relative;
}
pre:nth-of-type(3):before{
content: “CSS”;
position: absolute;
top: -20px;
left: 0;
font-size: 0.85rem;
font-weight: bold;
color: #fff;
background-color: #007bff;
padding: 2px 10px;
border-radius: 5px;
}
ul {
display: inline-block;
text-align: center;
}
li {
display: inline-block;
margin: 0 10px;
}
接下来，大家可以使用text-align:center属性使列表项(li)居中对齐。
示例代码如下：