Front-end Development,
Effective Note-Taking.
CSS 排版中,`margin: 0 auto;` 可讓版面左右置中,需先設定寬度。`padding` 可用於垂直置中,調整上下間距一致即可。`line-height` 適用於單行文字的垂直置中,需與元素高度相同。`position` 和 `transform` 可實現水平垂直置中,無需指定寬高,使用 `transform: translate(-50%, -50%);` 搭配 `position: absolute;` 即可。
`flex` 也是一種方便的置中方法。`transform` 與 `position` 結合,能在不知寬高的情況下置中,提供了靈活的排版選擇。...
CSS 排版中,對齊分為水平和垂直兩種。水平對齊常用 text-align
,而垂直對齊則是 vertical-align
。text-align
可以使內部元件置中,但不會影響自身版面。vertical-align
只適用於行內元素,對於 display:inline
和 display:inline-block
的元素有效。若要垂直對齊多行文字,可使用 display:table-cell
。
其他對齊方式還有 margin
、padding
、position
、line-height
及 display
(grid, flex) 等。理解設計需求,選擇合適語法,才能迅速完成排版。...