Центрирование изображения в div с overflow: советы CSS

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

Чтобы горизонтально центрировать изображение внутри div, вы можете использовать CSS. Для центрирования изображений, которые отображаются как строчные элементы, используйте свойство text-align: center; в стилях родительского div. Если изображение представляет собой блочный элемент, то примените к нему display: block; и margin: 0 auto;.

/* Для строчных изображений */
div { 
  text-align: center; 
}

/* Для блочных изображений */
img { 
  display: block; 
  margin: 0 auto; 
}

<!-- Центрирование строчных изображений -->
<div style="text-align: center;">
  <img src="image.jpg" alt="Изображение по центру">
</div>

<!-- Центрирование блочных изображений -->
<div>
  <img style="display: block; margin: 0 auto;" src="image.jpg" alt="Изображение по центру">
</div>

Метод центрирования зависит от типа отображения изображения.

Flex and Center: история любви

Flexbox – верный помощник в современном дизайне, существенно облегчающий процесс центрирования контента, включая изображения.

#artiststhumbnail {
  display: flex;
  justify-content: center;
  /* Изображение в центре! */
}

Чтобы сохранить пропорции изображения при использовании в flex-контейнере, примените свойство align-self: center;.

#artiststhumbnail a img {
  align-self: center;
  /* Избегаем искажения! */
}

Метод inline-block

Если рядом с изображением имеется текст или эмодзи, можно использовать метод inline-block:

#imagewrapper {
  text-align: center;
}

#imagewrapper img {
  display: inline-block;
  margin: 0 5px; /* Дает пространство между изображениями */
}

Этот метод помогает обеспечить равные промежутки между элементами, идеально подходит для галерей или веб-страниц с фотографиями.

Позиционирование: Тонкости баланса

Для пиксельно точного позиционирования используйте относительное позиционирование вместе с преобразованием transform, чтобы достичь идеального баланса.

.centered-image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* Все в балансе! */
}

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

Ниже приведена схема показывающая, как 'изображение' (🚶‍♀️) должно быть размещено в центре 'div' (веревка).

Элемент Div:           ___________________________________
                      |                                   |
Центрирование изображения:   |                🚶‍♀️                |
                      |___________________________________|

Для достижения это композиции используйте следующие настройки в CSS:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Достижение баланса — наша цель 🎯 */
}

Продвинутые техники центрирования

Margin: Симметрия прежде всего

Для элементов с определенной шириной можно использовать метод с автоматическими отступами с обеих сторон для равномерного горизонтального распределения:

.centered-image {
  display: block;
  width: 50%; /* Половина ширины контейнера */
  margin-left: auto;
  margin-right: auto;
  /* Идеальная симметрия — наше все! */
}

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

CSS классы: Универсальность и повторное использование

Создавая отдельный CSS класс для центрирования, вы обеспечиваете универсальность и возможность повторного использования:

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Можно применять снова и снова 🐠 */
}

Transform: Поддержка старых браузеров

Чтобы обеспечить поддержку во всех браузерах, включая устаревшие, используйте свойства transform:

.centered-image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* Даже старые браузеры не останутся без внимания */
}

Inline элементы: Центрирование справедливо для всех

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

.inline-center {
  text-align: center;
}

.inline-center img {
  display: inline;
  /* Все в центре! */
}

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

1. Центрирование в CSS: Полное руководство | CSS-Tricks — Бесценная справочная информация по центрированию в CSS.
2. Центрирование элемента – CSS: Каскадные таблицы стилей | MDN — Официальное руководство MDN по позиционированию элементов.
3. Как центрировать изображение — Пошаговый обучающий материал о центрировании изображения внутри div.
4. Вопрос про мгновенное центрирование — Полезные советы сообщества Stack Overflow о центрировании изображений.
5. Отступы слева и справа для элемента с шириной 100% – HTML & CSS – Форумы SitePoint — Дискуссии, объясняющие проблемы с отступами и центрированием в CSS.
6. Как центрировать что угодно с CSS – Выровнять Div, текст и многое другое — Обилие методов центрирования от FreeCodeCamp.
7. Полное руководство по Flexbox | CSS-Tricks — Все, что нужно знать о Flexbox для адаптивного дизайна и центрирования.