От автора: я хотел бы рассмотреть некоторые примеры выравнивания текста с помощью text-align CSS, так как многие из нас, включая и меня, могут даже не подумать о подобных вещах.
Прежде чем рассказать о приемах, которые я собираюсь использовать, я бы хотел сначала рассмотреть способы, с помощью которых мы можем выравнивать элемент. Вот те, которыми пользуюсь я:
Flexbox
Отступ auto
Позиционирование
В следующих примерах я рассмотрю некоторые варианты использования 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.