Приобретая членство в SitePoint Premium, вы получаете доступ ко всей серии AtZ: CSS .
Press shift question mark to access a list of keyboard shortcuts
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. В этой статье я добавил новый быстрый совет / урок о свойствах Float и Clear и о том, как центрировать элементы различными способами.
F для Float и Clear
Плавающее отлично подходит, если вы хотите переместить элемент влево или вправо от страницы, но, к сожалению, вы не можете сделать float: center Что за боль, верно?
Ну, не бойся, вот и все, что нужно для центрирования всевозможных элементов.
Совет 1
Если элемент является блочным элементом, вы можете объединить widthmargin: auto
margin: auto
Совет 2
Если элемент встроенный (или встроенный блок), используйте text-align: center
Совет 3
Если элемент расположен абсолютно, объедините его lefttransform
Подобную технику также можно использовать для вертикального центрирования элементов, но об этом в будущем.
Совет 4
Используйте flexbox (еще одно свойство ‘F’, ура!)
Чтобы использовать flexbox для центрирования одного элемента (или группы элементов), необходимо установить два свойства для содержащего элемента: display: flexjustify-content: center
Есть много других интересных вещей, которые вы можете сделать с flexbox, включая увеличение или уменьшение содержащего элемента, чтобы наилучшим образом использовать доступное пространство. Вы можете даже выровнять элемент как по вертикали, так и по горизонтали, в отличие от блокировки и встраивания, которые определяют вертикальное или горизонтальное выравнивание.
Еще одно большое преимущество использования flexbox заключается в том, что больше нет проблем со свертыванием контейнеров и нет необходимости использовать решение с использованием clearfix.