CSS от А до Я: как центрировать элементы при помощи свойств float и clear

CSS от А до Я: как центрировать элементы при помощи свойств float и clear

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойствами float и clear.

F значит float и clear

Обтекания отлично подходят для выравнивания элемента по левому или правому краю страницы. Однако вы не можете при помощи float: center центрировать элемент. Несправедливо, правда? Не бойтесь, сегодня я расскажу вам все тайны по центрированию элементов.

Совет 1

Если элемент блочный, можно совмещать свойства width и margin: auto. Свойство margin: auto автоматически вычислит равные внешние отступы по левому и правому краю, тем самым центрируя блок внутри своего контейнера.

Совет 2

Если элемент строчный (или inline-block), применяйте к родительскому контейнеру свойство text-align: center.

Совет 3

Если элемент имеет абсолютное позиционирование, то для горизонтального центрирования используйте свойства left и transform вместе.

Похожим образом можно сделать вертикальное центрирование, но более подробно об этом в следующих советах!

Совет 4

Используйте Flexbox (еще одно свойство на букву F!). Чтобы центрировать один элемент с помощью flexbox, вам понадобится прописать два свойства на контейнере: display: flex и justify-content: center.

Flexbox позволяет творить много чего интересного. В частности, с его помощью можно растягивать и сжимать контейнеры для более рационального использования пространства. С его помощью можно даже выровнять элемент по горизонтали и вертикали, чего нельзя сделать при работе с блочными или строчными элементами. Их можно выравнивать или по горизонтали, или по вертикали.

Flexbox удобен еще и тем, что с ним больше не возникает проблем со схлопыванием контейнеров, то есть больше не нужно использовать clearfix.

Автор: Guy Routledge

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree