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.
右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.