Центрирование группы элементов в div: решения CSS

Быстрый ответ

Примените свойство display: inline-block; к дочерним блокам вместо использования float. Установите text-align: center; для родительского блока. Чтобы убрать отступы между элементами, задайте font-size: 0 для родительского блока и восстановите исходный размер шрифта для дочерних элементов.

<div style="text-align:center; font-size:0;">
  <div style="display:inline-block; font-size:initial;">Содержимое 1</div>
  <div style="display:inline-block; font-size:initial;">Содержимое 2</div>
  <div style="display:inline-block; font-size:initial;">Содержимое 3</div>
</div>

Методы центрирования

Современный подход: Flexbox

Flexbox позволяет эффективно выполнять горизонтальное и вертикальное выравнивание элементов. Для этого используйте justify-content: center; и align-items: center;.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  /* Здесь float не требуется. */
}

Подробнее об этом расскажет наш спикер на видео

Традиционный метод: Центрирование блочных элементов

Для блочных элементов, таких как div, задайте ширину и автоматические отступы слева и справа.

div {
  width: 50%; 
  margin-left: auto;
  margin-right: auto;
}

Обеспечение clearfix для плавающих элементов

Для предотвращения схлопывания контейнера, содержащего плавающие элементы, используйте clearfix.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Методы настройки

Установка размеров как профессионалу

Укажите ширину и высоту в процентах для эластичного макета:

.parent {
  width: 80%; 
  margin: auto;
}
.child {
  width: 30%;
}

Вспомогательные div-блоки

Пригодятся дополнительные div-блоки с overflow: hidden; или абсолютное позиционирование внутри блока с относительным позиционированием, если display: inline-block; не подходит.

Будьте осторожны с совместимостью браузеров

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

Визуализация

Можно представить дочерние блоки как воздушные шарики (🎈) внутри комнаты (🏠):

🏠: [🎈🎈🎈]

Центрируем шарики:

.room {
  display: flex;
  justify-content: center;
  align-items: center;
}
.balloon {
  /* Float здесь не при делах. */
}

Результат будет таким:

🏠:     [ 🎈🎈🎈 ]

flexbox обеспечивает равномерное распределение и центрирование воздушных шаров (🎈) в пространстве комнаты (🏠).

Тактики адаптивности

Магия медиа-запросов

Медиа-запросы помогают адаптировать макет под различные устройства, сохраняя компоненты в центре.

@media (max-width: 600px) {
  .child {
    width: 100%; 
  }
}

Масштабирование с помощью em

Использование em для указания размеров обеспечит масштабируемость и адаптивность макета.

Полезные материалы

1. Руководство по центрированию в CSS от CSS-Tricks
2. CSS Flexbox (Flexible Box) от w3schools
3. Всё об использовании float в CSS на CSS-Tricks
4. Свойство float на MDN
5. Простая шпаргалка по flexbox
6. Статья про псевдо-абсолютное позиционирование на A List Apart