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即可。文本对齐中心可用于许多情况，并且不仅可用于文本。它可以在任何内联或内联块元素上使用，并且可以实现一些简洁的小东西。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

  

put text-align：center;在ul.tiles