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

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

Использование. Как применить

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

Класс Описание
.uk-align-left Выравнивает элемент по левому краю, создается правый и нижний отступ.
.uk-align-right Выравнивает элемент по правому краю, создается левый и нижний отступ.
.uk-align-center Центрирует элемент горизонтально и устанавливается нижний отступ.
<img class="uk-align-left" src="" alt="">

Примеры

Выравниваем изображение по левому краю с отступами от него.

  • Пример изображения

    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись.

  • <div class="uk-panel">
        <img class="uk-align-left uk-margin-remove-adjacent" src="demo/img/light.jpg" width="225" height="150" alt="Пример изображения">
        <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
        <p>Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись.</p>
    </div>

Центрируем с нижним отступом изображение горизонтально.

  • Пример изображения

    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

  • <div class="uk-panel">
        <img class="uk-align-center uk-margin-remove-adjacent" src="demo/img/light.jpg" width="225" height="150" alt="Пример изображения">
        <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="" alt="">
  • Пример изображения

    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись.

  • <div class="uk-panel">
        <img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent"  src="demo/img/light.jpg" width="225" height="150" alt="Пример изображения">
        <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
        <p>Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись.</p>
    </div>
Документация
Компоненты