给定三个li标签,使li元素的内部使用不同的方式实现垂直水平居中
<ul>
<li class="li1">
<p>123</p>
</li>
<li class="li2">
<p>123</p>
</li>
<li class="li3"><span class="span1">¥</span><span class="span2">123</span></li>
</ul>
css通用样式:
ul {
width: 300px;
}
ul li {
width: 100%;
height: 60px;
background-color: beige;
margin-top: 10px;
list-style: none;
}
具体实现方法:
1、使用display:flex
.li3 {
display: flex;
justify-content: center;
align-items: center;
}
2、使用line-height行高等于盒子高度实现垂直居中,text-align:center实现水平居中
.li2 {
line-height: 60px;
text-align: center;
}
3、对块级元素使用margin:auto,但是块级元素中有左右两侧会实现居中,垂直方向无法实现,所以需要使用display:flex方式使垂直方向的margin:auto生效
.li1 {
display: flex;
}
.li1>p {
margin: auto;
}
最后实现: