利用 css 讓 ul div 置中

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

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

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

CSS

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

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

ul 外還有父層 div

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

HTML

那我們可以在父層設定text-align,並修改uldisplay 狀態為 inline-block

CSS

ul 沒有父層

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

HTML

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

CSS

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

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團