Скрытая сила text-align CSS

От автора: я хотел бы рассмотреть некоторые примеры выравнивания текста с помощью text-align CSS, так как многие из нас, включая и меня, могут даже не подумать о подобных вещах.

Прежде чем рассказать о приемах, которые я собираюсь использовать, я бы хотел сначала рассмотреть способы, с помощью которых мы можем выравнивать элемент. Вот те, которыми пользуюсь я:

В следующих примерах я рассмотрю некоторые варианты использования text-align, которые просты и эффективны.

Список тегов

Этот мой любимый, и я им часто пользуюсь. Задав для каждого элемента тега inline-block, легко использовать для оболочки text-align: center.

Футер сайта

Предположим, что есть две блока, каждый из которых занимает 50% своего родителя. Внутри каждого у нас есть img. Один справа выровнен по правому краю, а другой — по левому краю. Как мы можем просто это сделать?

По умолчанию img — это встроенный элемент, на который может влиять свойство text-align. Если мне нужно выровнять логотип по правому краю, я могу сделать следующее:

Компонент карточки

Аватар пользователя может быть иконкой или чем-то еще, за которым следует элемент с display: block. В данном случае — это заголовок карточки.

Сочетание text-align с writing-mode

В случае использования writing-mode можно расположить заголовок по центру по вертикали.

Демо

Автор: Ahmad Shadeed

Источник: //ishadeed.com

Редакция: Команда webformyself.

Комментарии Вконтакте: