Бешеный конкурс!
7:47
Автор: Рубрика: CSS-рецепты Комментариев нет

Как сделать в css div по центру родительского элемента

Приветствую всех на своем блоге, где я пишу в основном о разичных css-фишках, которые можно делать с элементами на веб-страницах. В этой статье мы рассмотрим не фишку, а скорее стандартный прием, который позволяет сделать в css div-блок по центру веб-страницы или родительского элемента. Кроме этого я также записал короткое видео, в котором показал центровку на примере двух блоков. Вот оно:

Сам прием

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

  1. Прописываем нашему div-у определенную ширину (обязательно)
  2. Определяем для него внешние отступы – margin: 0 auto;

Например, в желтом контейнере (люблю я все на желтых блоках показывать, правда laugh ) лежит серый блок. Разметка выглядит так:

<body>
<div id = "ct">
<div></div>
</div>
</body>

Стили:

#ct{
width: 400px;
height: 400px;
background-color: yellow
}
#ct div{
background: grey;
width: 100px;
height: 100px;
}

Тут блок #ct выступает родителем для пустого div, потому что он лежит в нем. Body, в свою очередь, является родителем для #ct. Наш серый блок в 4 раза меньше своего контейнера и по умолчанию будет прижат к его верхнему левому краю.блок в левом верхнем углу Как нам его отцентировать? Все просто:

#ct div{
Width: 100px;
Margin: 0 auto;
}

Ширину мы уже задали ранее, я просто еще раз ее записал чтобы подчеркнуть, что ширину для центровки нужно записывать ОБЯЗАТЕЛЬНО! Второе обязательное свойство – margin: 0 auto, где 0 – отступ сверху и снизу (вы можете написать другой, если что), а auto это как раз то волшебное слово, которое центрирует элемент по горизонтали. Давайте проверим.блок по центру после margin 0 auto

Все работает, мы добились поставленной задачи, хотя она и была очень простой. Прием работает даже в том случае, если сам родительский блок не имеет явных размеров. Например, body – это тело страницы и мы ему ширину не задаем, но если для #ct записать margin: 0 auto (ширина у этого контейнера и так уже определена), то он тоже станет по центру относительно своего родителя, то есть относительно body.

Итог

Вот так я обещал вам в конце объяснить, что такое родитель, но вы уже и сами все поняли, правда? smile По-моему все просто. В каком теге лежит элемент, тот и является его родителем. В общем, вот такой вот простой прием для центровки блочных элементов. Если у вас есть какие-то вопросы по нему, то пишите в комментарии, обсудим smile

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет