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 對齊教程，瞭解更多關於對齊元素的資訊。
