HTML页码居中--＞转换为inline或着inline-block元素

---

前言

之前在居中内容时，常用到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元素

1. 使ul变成行内块元素
2. 因为行内块有基线对准问题，所以需要给标签设置vertical-align: middle; ，让行内块元素变成中线对齐。这里需要注意，button本身就是行内块元素，所以也需要添加。
3. 大盒子里的标签都变成行内块元素之后，使用text-align：center；实现居中对齐。