对齐
根据视口大小控制内联元素的对齐方式。
用法
要使文本与图片或其他元素对齐，并带有一定的间距，需要添加下面这些 class中的一个：
| Class | Description |
|---|---|
.uk-align-left |
将元素浮动到左侧，并创建右侧和底部边距。 |
.uk-align-right |
将元素浮动到右侧，并创建左侧和底部边距。 |
.uk-align-center |
使元素居中并创建底部编距。 |
<img class="uk-align-left" src="" 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="/skin/ukv3/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 提供了一系列响应式对齐class。通常，它们与一般的对齐class效果一样，但是它们拥有的后缀表示它们会根据不同的断点产生不同效果。
| Class | Description |
|---|---|
.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="" 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="/skin/ukv3/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>