Align
可對行內元素 (inline) 與文字做水平與垂直對齊設定。
Horizontal Align
text-align Breakpoints
| 類別名稱 | 值 | |
|---|---|---|
| 置左 | .u-align{@bp}:l | left |
| 置中 | .u-align{@bp}:c | center |
| 置右 | .u-align{@bp}:r | right |
Left
Center
Right
@sm:c, @lg:r
<div class="u-align:l"></div>
<div class="u-align:c"></div>
<div class="u-align:r"></div>
<div class="u-align@sm:c u-align@lg:r"></div>
Vertical Align
vertical-align Breakpoints
可用於行內元素與文字的垂直對齊。所有通用類別名稱的前綴詞為 .u-valign{@bp}:。
| 類別名稱 | 值 | |
|---|---|---|
| 置上 | .u-valign{@bp}:t | top |
| 與本文齊上 | .u-valign{@bp}:tt | text-top |
| 置中 | .u-valign{@bp}:m | middle |
| 置底 | .u-valign{@bp}:b | bottom |
| 本文基礎線 | .u-valign{@bp}:bl | baseline |
| 與本文齊底 | .u-valign{@bp}:tb | text-bottom |
| 對齊上標 | .u-valign{@bp}:sup | sup |
| 對齊下標 | .u-valign{@bp}:sub | sub |
Top
.u-valign:t- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Text Top
.u-valign:tt- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Middle
.u-valign:m- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Bottom
.u-valign:b- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Baseline
.u-valign:bl- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Text Bottom
.u-valign:tb- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sup
.u-valign:sup- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sub
.u-valign:sub- Lorem ipsum dolor sit amet, consectetur adipisicing elit.