对齐

根据视口大小控制内联元素的对齐方式。

用法

要对齐图像或其他元素，并在文本和元素之间留有间距，请添加以下类之一。

类	描述
`.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>

文档

对齐

用法

响应式