Компонент Выравнивание Align

Управляйте выравниванием встроенных элементов в зависимости от размера области просмотра вместе с фреймворком UIkit 3. Адаптивные классы при выравнивании элементов.

Использование

Чтобы выровнять изображение или другие элементы с отступом между текстом и элементом добавьте один из этих классов:

Класс Описание
.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="/demo/img/light.jpg" 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="/demo/img/light.jpg" 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/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>
Align