Выравнивайте встроенные элементы в зависимости от размера области просмотра.
Как использовать компонент Align в UIkit 3
Чтобы выровнять изображения или другие элементы с отступами между текстом и элементом, добавьте один из этих классов.
| Класс | Описание |
|---|---|
.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="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 3 имеет ряд адаптивных классов выравнивания. По сути, они работают так же, как обычные классы выравнивания, за исключением того, что у них есть суффиксы устройств, которые срабатывают на определенных разрешениях.
| Класс | Описание |
|---|---|
.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 |
Работает только на устройствах с шириной экрана of 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="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>