整列
ビューポートサイズに応じてインライン要素の配置を制御します。
使用法
テキストと要素の間に間隔を置いて画像や他の要素を整列させるには、以下のクラスのいずれかを追加します。
| クラス | 説明 |
|---|---|
.uk-align-left |
要素を左にフロートし、右と下のマージンを作成します。 |
.uk-align-right |
要素を右にフロートし、左と下のマージンを作成します。 |
.uk-align-center |
要素を中央に配置し、下のマージンを作成します。 |
<img class="uk-align-left" src="" width="" height="" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-panel"> <img class="uk-align-left uk-margin-remove-adjacent" src="images/light.jpg" width="225" height="150" alt="Example image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
レスポンシブ
UIkitは、多数のレスポンシブ整列クラスを提供します。基本的に、それらは通常の整列クラスと同様に機能しますが、有効になるブレークポイントを表すサフィックスが付いています。
| クラス | 説明 |
|---|---|
.uk-align-left@s.uk-align-right@s |
640px以上のデバイス幅にのみ影響します。 |
.uk-align-left@m.uk-align-right@m |
960px以上のデバイス幅にのみ影響します。 |
.uk-align-left@l.uk-align-right@l |
1200px以上のデバイス幅にのみ影響します。 |
.uk-align-left@xl.uk-align-right@xl |
1600px以上のデバイス幅にのみ影響します。 |
<img class="uk-align-center uk-align-right@m" src="" width="" height="" alt="">-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-panel"> <img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent" src="images/light.jpg" width="225" height="150" alt="Example image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>