利用 css 讓 ul div 置中

我們常利用ul做選單、做列表、做頁碼 …等等,但會碰到一種狀況,是想讓ul置中,如果你直接寫text-align:center會發現ul完全不鳥你!

這是因為ul預設為display:block,所以如果想讓他置中,必須更改他的display狀態。

想了解一些 element 預設的 display 狀態,可參考以下資料:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }

摘自:Appendix D. Default style sheet for HTML 4

我提供兩種不同的結構,跟大家分享如何讓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;
}

以上兩種方法供大家參考,可以針對不同的結構,採用不同的置中處理。