How TO - 居中列表
了解如何使用 CSS 居中列表。
居中列表
- 咖啡
- 茶
- 可口可乐
居中 HTML 列表
步骤 1) HTML
将 <ul> 元素包裹在一个容器元素内，如 <div>
示例
<div class="container">
<ul class="myUL">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</div>
步骤 2) 添加 CSS
将 <div> 元素居中对齐，并将 <ul> 的 display 更改为 inline-block。
您可以选择将列表项左对齐，以获得更整洁的视图
示例
div.container {
text-align: center;
}
ul.myUL {
display: inline-block;
text-align: left;
}
自己动手试一试 »
提示：访问我们的 CSS 对齐教程，了解更多关于对齐元素的信息。
