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