Как использовать CSS для центрирования изображений и других объектов HTML

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

Центрирование текста с помощью CSS

Вам нужно знать только одно свойство стиля для центрирования текста на странице:

.center {
выравнивание текста: центр;
}

В этой строке CSS каждый абзац, написанный с помощью класса .center, будет центрирован по горизонтали внутри своего родительского элемента. Например, абзац внутри подразделения (дочерний элемент этого подразделения) будет центрирован по горизонтали внутри.

Вот пример применения этого класса в HTML-документе:

Этот текст расположен по центру.

При центрировании текста с помощью свойства text-align помните, что он будет центрирован внутри содержащего его элемента, а не обязательно по центру всей страницы.

Центрирование блоков содержимого с помощью CSS

Блоки контента создаются с использованием HTML.

.center {
маржа: авто;
ширина: 80em;
}

Это сокращение CSS для свойства margin установит для верхнего и нижнего поля значение 0, а для левого и правого будет использоваться значение «auto». Этот по существу занимает любое доступное пространство и равномерно делит его между двумя сторонами окна просмотра, эффективно центрируя элемент на страница.

Здесь это применяется в HTML:

Весь этот блок центрирован,
но текст внутри него выровнен по левому краю.

Пока ваш блок имеет определенную ширину, он будет центрироваться внутри содержащего элемента. Текст, содержащийся в этом блоке, не будет центрирован внутри него, а будет выровнен по левому краю. Это связано с тем, что текст по умолчанию выровнен по левому краю в веб-браузерах. Если вы хотите, чтобы текст также был центрирован, вы можете использовать свойство text-align, описанное ранее, в сочетании с этим методом, чтобы центрировать разделение.

Центрирование изображений с помощью CSS

Хотя большинство браузеров будут отображать изображения по центру с использованием того же свойства text-align, консорциум W3C это не рекомендует. Следовательно, всегда есть шанс, что будущие версии браузеров проигнорируют этот метод.

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

img.center {
дисплей: блок;
маржа слева: авто;
маржа-право: авто;
}

А вот HTML-код изображения, которое нужно центрировать:

Вы также можете центрировать объекты с помощью встроенного CSS (см. Ниже), но этот подход не рекомендуется, поскольку он добавляет визуальные стили в вашу разметку HTML. Помните, что стиль и структура должны быть отдельными; добавление стилей CSS в HTML нарушит это разделение, и поэтому вам следует по возможности избегать его.

Вертикальное центрирование элементов с помощью CSS

Центрирование объектов по вертикали всегда было сложной задачей в веб-дизайне, но выпуск CSS-модуль гибкой верстки в CSS3 предоставляет способ сделать это.

Вертикальное выравнивание работает аналогично горизонтальному выравниванию, описанному выше. Свойство CSS имеет вертикальное выравнивание, например:

.vcenter {
вертикальное выравнивание: по центру;
} 

Все современные браузеры поддерживать этот стиль CSS. Если у вас есть проблемы со старыми браузерами, W3C рекомендует центрировать текст в контейнере по вертикали. Для этого поместите элементы внутри содержащего элемента, например div, и установите для него минимальную высоту. Объявите содержащий элемент как ячейку таблицы и установите вертикальное выравнивание на «середину».

Например, вот CSS:

.vcenter {
мин-высота: 12em;
дисплей: таблица-ячейка;
вертикальное выравнивание: по центру;
}

А вот HTML:

Этот текст располагается по центру поля по вертикали.

Вертикальное центрирование и старые версии Internet Explorer

Вы можете принудительно центрировать Internet Explorer (IE), а затем использовать условные комментарии, чтобы только IE видел стили, но они были немного подробными и непривлекательными. Решение Microsoft в 2015 г. прекратить поддержку старые версии IEоднако это не проблема, поскольку IE выйдет из употребления.