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

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

Правильный способ добиться визуального вида центрированных изображений или текста или даже всей вашей веб-страницы — использовать каскадные таблицы стилей (CSS). Большинство свойств для центрирования были в CSS начиная с версии 1.0, и они прекрасно работают с CSS3 и современными веб-браузерами.

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

Использование CSS для центрирования элементов в HTML

Центрирование с помощью CSS может быть проблемой для начинающих веб-дизайнеров, потому что существует множество способов реализовать этот визуальный стиль. Хотя различные методы могут быть хорошими или опытными веб-разработчиками, которые знают, что не все методы работают на каждом элементе, это может быть очень сложной задачей для начинающих веб-профессионалов, поскольку широкое разнообразие методов означает, что они должны знать, когда использовать какой подход. Лучше всего понять несколько подходов. Как только вы начнете их использовать, вы узнаете, какой метод лучше всего работает в каких случаях.

На высоком уровне вы можете использовать CSS для:

• Центр текста
• Центрировать элемент уровня блока (например, деление)
• Центрировать изображение
• Вертикально центрировать блок или изображение

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

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

Самая простая вещь для центрирования на веб-странице — это текст. Для этого нужно знать только одно свойство стиля:

выравнивания текста
. Возьмите стиль CSS ниже, например: p.center {text-align: center; }

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

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

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

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

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

Блоки — это любые элементы на вашей странице, которые имеют определенную ширину и устанавливаются как элемент уровня блока. Часто эти блоки создаются с использованием HTML
элемент. Наиболее распространенный способ центрировать блоки с помощью CSS — установить для левого и правого поля значение

авто
. Вот CSS для деления, к которому применен атрибут класса «center»: div.center {
поле: 0 авто;
ширина: 80 мкм;
}

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

Вот это применяется в HTML:

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

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

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

Хотя большинство браузеров будут отображать изображения по центру с использованием того же свойства выравнивания текста, которое мы уже рассматривали для абзаца, не стоит полагаться на эту технику, поскольку она не рекомендуется W3C. Так как это не рекомендуется, всегда есть вероятность, что будущие версии браузеров смогут игнорировать этот метод.

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

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

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

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

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

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

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

вертикальные выравнивания

с

средний
value..vcenter {
вертикальное выравнивание: среднее;
} 

Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox, хотя все больше и больше приходит к этому новому методу CSS-разметки! Фактически, все современные браузеры сегодня поддерживают этот стиль CSS. Это означает, что вашей единственной заботой о Flexbox будет гораздо более старая версия браузера. 

Если у вас есть проблемы со старыми браузерами, W3C рекомендует центрировать текст по вертикали в контейнере, используя следующий метод:

1. Поместите элементы для центрирования внутри содержащего элемента, такого как div.
2. Установите минимальную высоту для содержащего элемента.
3. Объявите этот элемент как ячейку таблицы.
4. Установите вертикальное выравнивание на «середину».

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

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

А вот и HTML:

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

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

Есть несколько способов заставить Internet Explorer (IE) центрироваться, а затем использовать условные комментарии, чтобы только IE видел стили, но они немного многословны и уродливы. Хорошая новость заключается в том, что с недавним решением Microsoft отказаться от поддержки более старых версий IE, те неподдерживающие браузеры должны скоро выйти, что облегчает веб-дизайнерам использование современных подходов к макетированию, таких как CSS FlexBox, которые сделают все макеты CSS, не просто центрирование, это проще для всех веб-дизайнеров.