CSS:将ul li项目对齐到中心(带边距)而不使用flex模型

Question

我有这样的代码:

<ul class="tiles">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

和css:

ul.tiles{
    width: 220px;
    height: 200px;
    list-style-type: none;
    background: #cecece;
    padding: 0;
}

li{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #8ac249;
    text-align: center;
    line-height: 50px;
    margin: 5px;
    float: left;
}

看起来如此:

将它更改为这样的模型是真实的(没有弹性框):

如何？

Answer 1

只需添加text-align:center到您的ul.文本对齐中心可用于许多情况,并且不仅可用于文本.它可以用在任何内联或内联块元素上,并且可以实现一些像这样的简洁小事.

ul.tiles{
    width: 220px;
    height: 200px;
    list-style-type: none;
    background: #cecece;
    padding: 0;
    text-align:center;
}

li{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #8ac249;
    text-align: center;
    line-height: 50px;
    margin: 5px;
}

<ul class="tiles">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>