前言
之前在居中内容时,常用到margin:0 auto;局限于在有固定宽高的块元素内使用,这样对于动态渲染数据时就不是很友好,例如写页码的时候,常常用li并排显示,但具体有多少个li又不能写“死”,这个时候宽高就不能确定,也就无法使用margin居中来设置了。
记录小技巧
既然没办法使用margin来控制块居中,就可以考虑一下,利用 text-align: center;来控制行内或者行内块元素居中显示,让其内容撑开宽高(如果需要固定的宽高,就选择转为行内块),且不会独占一行。这样既省去了浮动,也让代码更加方便后期动态渲染数据。
步骤
1.html代码
代码如下(示例):
<!-- 页码 居中的办法是将ul设置为 inline-block-->
<div class="page">
<button>上一页</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button>下一页</button>
</div>
2.css样式
*{
margin: 0;padding: 0;list-style: none;}
/* 页码 */
.page{
width: 1180px;
height: 122px;
box-sizing: border-box;
padding: 30px 0 ;
background-color: chocolate;
margin: 0 auto;
text-align: center;
line-height: 62px;
}
.page button {
width: 91px;
height: 40px;
border-radius: 5px;
background-color: #ededed;
color: #a4a4a4;
font-size: 18px;
vertical-align: middle;/* 使其行内元素居中对齐 */
}
.page button:nth-of-type(1) {
margin-right: 27px;
}
.page button:nth-of-type(2) {
margin-left: 16px;
}
.page ul {
vertical-align: middle; /* 使其行内元素居中对齐 */
display: inline-block;/* 转换为行内块 */
}
.page ul li {
float: left;
width: 38px;
height: 40px;
background-color: #ededed;
color: #333333;
font-size: 18px;
border-radius: 5px;
text-align: center;
line-height: 40px;
margin-right: 11px;
}
</style>
2.效果图
总结
HTML页码居中:
–>转换为inline或着inline-block元素
- 使ul变成行内块元素
- 因为行内块有基线对准问题,所以需要给标签设置vertical-align: middle; ,让行内块元素变成中线对齐。这里需要注意,button本身就是行内块元素,所以也需要添加。
- 大盒子里的标签都变成行内块元素之后,使用text-align:center;实现居中对齐。