Align

根据视口尺寸控制行内元素的对齐方式。

用法

要为图片或其他元素设置对齐，并在文字与元素之间保留间距，添加下面这些类中的某一个。

类	说明
`.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>

文档

Align

用法

响应式