精選文章

[前端學習筆記] 雜記 2017-07-12

[前端學習筆記] div 水平置中

 今天練習 jQuery 的計畫被這個問題給搞亂了,因為用 "margin: 0 auto" 的設定不能順利的把 div 區塊水平置中,查了一下資料才發現 "margin: 0 auto" 有個出乎我意料的限制,就是必須要設定區塊的寬度!

 雖然我還沒查到原因,不過實作上如果要維持 div 區塊原本 "display: block;" 的設定,那就別無選擇的一定要加上寬度設定,不管是固定寬度(如 "width: 200px;")還是動態寬度(如 "width: 50%;")都可以,這樣就可以用 "margin: 0 auto;" 來把 div 區塊置中。

 如果要利用 "display: inline-block;" 來自動偵測內部元件的總寬度,進而把元件置中,那麼就必須要把 inline-block 的區塊當作文字來編排,也就是說,要在上層加入 "text-align: center;" 來把 inline-block 區塊置中。

 除此之外,也可以利用 table 或 flex 來做置中,不過這可能會造成附近排版的困難,所以要用 table 或 flex 的話,最好要把附近的排版情況也一起考慮進去。