Изменение выравнивания текста в зависимости от размера экрана устройства.
Для удобства названия классов аналогичны используемым в Bootstrap.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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; } } |
Пример.
|
1 |
<div class="text-xs-left text-sm-center text-md-right">Текст</div> |
Для устройства с шириной экрана менее 768 пикселей текст будет выровнен по левому краю, с шириной экрана от 768 до 991 px — по центру, с шириной экрана более 992 px — по правому краю.