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，並修改 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;
}以上兩種方法供大家參考，可以針對不同的結構，採用不同的置中處理。
歡迎給我點鼓勵，讓我知道你來過 ：）
5
感謝分享