HTML/CSS

2014.03.10

利用 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,並修改 uldisplay 狀態為 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;
}

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

歡迎給我點鼓勵,讓我知道你來過 :)

guest
1 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
徐培鈞
4 months ago

感謝分享

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.