對齊

根據視窗大小控制行內元素的對齊方式。

用法

若要在文字和元素之間留有間距的情況下對齊圖片或其他元素，請新增下列其中一個類別。

類別	描述
`.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="">

<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>

文件

對齊

用法

響應式