От автора: я хотел бы рассмотреть некоторые примеры выравнивания текста с помощью text-align CSS, так как многие из нас, включая и меня, могут даже не подумать о подобных вещах.
Прежде чем рассказать о приемах, которые я собираюсь использовать, я бы хотел сначала рассмотреть способы, с помощью которых мы можем выравнивать элемент. Вот те, которыми пользуюсь я:
Flexbox
Отступ auto
Позиционирование
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ следующих примерах я рассмотрю некоторые варианты использования text-align, которые просты и эффективны.
Список тегов
Этот мой любимый, и я им часто пользуюсь. Задав для каждого элемента тега inline-block, легко использовать для оболочки text-align: center.
| 1 2 3 4 5 6 7 | .tags-wrapper { text-align: center; /* Text align for the win! */ } .tag { display: inline-block; } |
Футер сайта
Предположим, что есть две блока, каждый из которых занимает 50% своего родителя. Внутри каждого у нас есть img. Один справа выровнен по правому краю, а другой — по левому краю. Как мы можем просто это сделать?
По умолчанию img — это встроенный элемент, на который может влиять свойство text-align. Если мне нужно выровнять логотип по правому краю, я могу сделать следующее:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее| 1 2 3 4 5 6 7 8 9 | <div class="wrapper"> <div class="item start"> <img src="logo.png" alt=""> </div> <div class="item end> <span>Brought to you by</span> <img src="logo.png" alt=""> </div> </div> |
| 1 2 3 4 5 6 7 | .item.start { text-align: right; } .item.end { text-align: left; } |
Компонент карточки
Аватар пользователя может быть иконкой или чем-то еще, за которым следует элемент с display: block. В данном случае — это заголовок карточки.
| 1 2 3 4 5 6 7 8 9 10 | .card { /* Other styles */ text-align: center; } .card-avatar { display: inline-block; width: 50px; height: 50px; /* Other styles */ } |
Сочетание text-align с writing-mode
В случае использования writing-mode можно расположить заголовок по центру по вертикали.
| 1 2 3 4 5 | h2 { writing-mode: vertical-lr; height: 100%; text-align: center; } |
Демо
Автор: Ahmad Shadeed
Источник: //ishadeed.com
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
