Html CSS：在没有flex模型的情况下，将ul li项目对齐到中心（带边距）

我有这样的代码：

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

看起来是这样的：

是否真的要将其更改为此类模型（不带flex box）：

---

如何操作？

只需将

文本对齐：居中

添加到您的

ul

。文本居中对齐在许多情况下都很有用，并且不仅仅用于文本。它可以在任何内联或内联块元素上使用，并且可以实现像这样一些整洁的小事情

ul.tiles{
宽度：220px；
高度：200px；
列表样式类型：无；
背景:#塞切奇；
填充：0；
文本对齐：居中；
}
李{
显示：内联块；
宽度：50px；
高度：50px；
背景：#8ac249；
文本对齐：居中；
线高：50px；
保证金：5px；
}

一,
二,
三,
四,
五,

只需将

文本对齐：居中

添加到您的

ul

。文本居中对齐在许多情况下都很有用，并且不仅仅用于文本。它可以在任何内联或内联块元素上使用，并且可以实现像这样一些整洁的小事情

ul.tiles{
宽度：220px；
高度：200px；
列表样式类型：无；
背景:#塞切奇；
填充：0；
文本对齐：居中；
}
李{
显示：内联块；
宽度：50px；
高度：50px；
背景：#8ac249；
文本对齐：居中；
线高：50px；
保证金：5px；
}

一,
二,
三,
四,
五,

---

将文本对齐：居中；在ul瓷砖中

---

将文本对齐：居中；在ul瓷砖中

---

你是说你的李是浮动的所以这不起作用？如果是这样，它们需要浮动吗？是的，浮动不起作用。我不确定它们漂浮的时候有没有办法？我猜你有理由让它们浮动，我能问一下是什么吗所以它坏了（如果我加上float，一切都正常，但位置不对）你看到我的小提琴了吗？@brabertaser1992是的，给你的

li

标签加上

vertical align:top

。看这里：你是说你的李是浮动的，所以这不起作用？如果是这样，它们需要浮动吗？是的，浮动不起作用。我不确定它们漂浮的时候有没有办法？我猜你有理由让它们浮动，我能问一下是什么吗所以它坏了（如果我加上float，一切都正常，但位置不对）你看到我的小提琴了吗？@brabertaser1992是的，给你的

li

标签加上

vertical align:top

。请看这里：

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

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