教學文章

提供兩種不同的結構，跟大家分享如何讓ul置中

ul 外還有父層 div

假設你的結構為「ul 還有父層」，亦即：

<div class="wrap"> <ul> <li>Hello</li> <li>World</li> </ul> </div>

那我們可以在父層設定text-align，並修改ul的 display 狀態為 inline-block：

.wrap { text-align: center; } .wrap ul { display: inline-block; } ul 沒有父層

如果你的 HTML 結構中，ul沒有父層包覆，例如：

<ul class="wrap"> <li>Hello</li> <li>World</li> </ul>

那我們可以利用margin: 0 auto以及display:table調整ul：

ul.wrap { display: table; margin: 0 auto; }