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

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

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

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

Список тегов

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

.tags-wrapper { text-align: center; /* Text align for the win! */
} .tag { display: inline-block;
}

Футер сайта

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

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

<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>

.item.start { text-align: right;
} .item.end { text-align: left;
}

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

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

.card { /* Other styles */ text-align: center;
}
.card-avatar { display: inline-block; width: 50px; height: 50px; /* Other styles */
}

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

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

h2 { writing-mode: vertical-lr; height: 100%; text-align: center;
}

Демо

Автор: Ahmad Shadeed

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

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