对齐
根据视窗大小控制内联元素的对齐方式。
用法
要将图像或其他元素与文本和元素之间的间距对齐，请添加以下类之一。
| 类 | 描述 |
|---|---|
.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>