Рубрики
Вёрстка

CSS: адаптивное выравнивание

Изменение выравнивания текста в зависимости от размера экрана устройства.

Для удобства названия классов аналогичны используемым в Bootstrap.

CSS:

.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

Пример.

<div class="text-xs-left text-sm-center text-md-right">Текст</div>

Для устройства с шириной экрана менее 768 пикселей текст будет выровнен по левому краю, с шириной экрана от 768 до 991 px — по центру, с шириной экрана более 992 px — по правому краю.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *