Компонент Выравнивание Align
Управляйте выравниванием встроенных элементов в зависимости от размера области просмотра вместе с фреймворком UIkit 3. Адаптивные классы при выравнивании элементов.
Использование
Чтобы выровнять изображение или другие элементы с отступом между текстом и элементом добавьте один из этих классов:
Класс | Описание |
---|---|
.uk-align-left |
Выравнивает элемент по левому краю, создается правый и нижний отступ. |
.uk-align-right |
Выравнивает элемент по правому краю, создается левый и нижний отступ. |
.uk-align-center |
Центрирует элемент горизонтально и устанавливается нижний отступ. |
<img class="uk-align-left" src="" width="" height="" alt="">
- Пример №1
- Выравниваем изображение по левому краю с отступами от него.
- Пример №2
- Центрируем изображение горизонтально с нижним отступом.
Адаптивность
Адаптивность при выравнивании элементов
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 |
Влияет только на ширину устройства от 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"> <picture class="uk-align-center uk-align-right@m uk-margin-remove-adjacent"> <source srcset="images/light.avif" type="image/avif"> <source srcset="images/light.webp" type="image/webp"> <img src="images/light.jpg" width="225" height="150" alt="Демо изображение" loading="lazy"> </picture> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p> <p>Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись.</p> </div>