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

Использование CSS будет наиболее оптимальным методом центрирования картинок, блоков текста и даже всего дизайна веб-страницы. Большинство свойств для HTML align стали доступны в CSS, начиная с версии 1.0. Они хорошо работают с CSS3 и современными веб-браузерами:

Использование CSS для центрирования картинок и иных HTML объектов

Применения CSS для центрирования в HTML

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

CSS можно без проблем использовать, чтобы:

  • Центрировать текст;
  • Центрировать блочный элемент(к примеру, div);
  • Центрировать изображение;
  • Вертикально центрировать блок или изображение.

Много лет назад веб-дизайнеры могли использовать <center> для центрирования картинок и текста. Но сейчас этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные веб-сайты должны иметь четкое разделение структуры и стилей.

Советы по центрированию при помощи CSS

HTML используется для создания структуры, а CSS определяет стили. Поскольку центрирование – это визуальная характеристика, то оно осуществляется при помощи каскадных стилей.

Центрирование текста с CSS

Проще всего центрировать текст на веб-странице. Чтобы это сделать, необходимо всего одно свойство: HTML text align:

p.center { text-align: center; }

При помощи данной строки кода каждый параграф с классом center будет центрирован горизонтально внутри родительского элемента.

Применения этого класса:

<p class="center">This text is centered.</p>

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

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

Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются при помощи <div>.

Наиболее распространенный метод центрирования блоков – это задать для левого и правого отступов значение auto:

div.center { margin: 0 auto; width: 80em;}

Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение 0, а левый и правый отступы будут использовать значение auto. Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align.

Применение в HTML:

<div class="center">This entire block is centered,but the text inside it is left aligned.</div>

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

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

Большинство браузеров отобразят картинки по центру при использовании свойства HTML text align. Но не следует полагаться на этот способ, поскольку он не рекомендован W3C.

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

img.center { display: block; margin-left: auto; margin-right: auto;}

Вот HTML код для картинки, которое необходимо центрировать:

<img src="blwebcam-sample.jpg" alt="Suni" class="center">

Также можно центрировать объекты при помощи встроенного CSS:

<div style="text-align: center;">

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

HTML vertical align было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3, появилось решение для данной задачи.

Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle:

.vcenter { vertical-align: middle;}

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

  • Поместите элементы, которые необходимо центрировать, внутрь элемента-контейнера, такого как div;
  • Задайте минимальную высоту элементу-контейнеру;
  • Объявите элемент-контейнер;
  • Установите для HTML vertical align значение middle.

Например:

.vcenter { min-height: 12em; display: table-cell; vertical-align: middle;}

HTML код:

<div class="vcenter"><p>This text is vertically centered in the box.</p></div>

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *