/
TAG
iTHome 鐵人賽

難解的 CSS 排版:認識對齊(下)

CSS 排版中,`margin: 0 auto;` 可讓版面左右置中,需先設定寬度。`padding` 可用於垂直置中,調整上下間距一致即可。`line-height` 適用於單行文字的垂直置中,需與元素高度相同。`position` 和 `transform` 可實現水平垂直置中,無需指定寬高,使用 `transform: translate(-50%, -50%);` 搭配 `position: absolute;` 即可。

`flex` 也是一種方便的置中方法。`transform` 與 `position` 結合,能在不知寬高的情況下置中,提供了靈活的排版選擇。...

難解的 CSS 排版:認識對齊(上)

CSS 排版中,對齊分為水平和垂直兩種。水平對齊常用 text-align,而垂直對齊則是 vertical-aligntext-align 可以使內部元件置中,但不會影響自身版面。vertical-align 只適用於行內元素,對於 display:inlinedisplay:inline-block 的元素有效。若要垂直對齊多行文字,可使用 display:table-cell

其他對齊方式還有 marginpaddingpositionline-heightdisplay (grid, flex) 等。理解設計需求,選擇合適語法,才能迅速完成排版。...

Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.