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="[email protected]:c [email protected]: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.