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

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

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

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

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

Много лет назад веб-дизайнеры могли использовать

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

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

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

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

p.center { text-align: center; }

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

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

This text is centered.

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

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

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

.

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

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

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

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

This entire block is centered, but the text inside it is left aligned.

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

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

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

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

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

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

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

Вертикальное центрирование элементов с помощью 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 код :

This text is vertically centered in the box.

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

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

Перевод статьи «Use CSS to Center Images and Other HTML Objects » был подготовлен дружной командой проекта .

Хорошо Плохо

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

Как правило, новички эту операцию делают на глаз, что совсем не обязательно. Выберите инструмент Перемещение и обратите внимание на его . Там имеется ряд настроек, которые и отвечают за эту задачу (смотрите на скриншоте ):

Первые три кнопки отвечают за выравнивание по вертикали (слева направо): по верхнему краю, по центру, по нижнему краю.

Следующие три кнопки отвечают за горизонтальное выравнивание (слева направо): по левому краю, по центру, по правому краю.

Таким образом, чтобы разместить объект ровно по центру, нужно выбрать центрирование по вертикали и горизонтали.

Самое главное правило выравнивания: прежде всего, вы должны указать фотошопу область, относительно которой программа и должна искать края или середину. Пока вы этого не сделаете, кнопки выравнивания будут не активными, то есть их нельзя нажать.

В этом и кроется секрет того, как сделать объект посередине всего изображения или его отдельного фрагмента.

Итак, последовательность действий следующая:

Допустим, нужно разместить по центру эту картинку:

Вариант 1 — относительно всего холста.

Шаг 1

Указываем фотошопу область, относительно которой программа должна выровнять изображение. Это делается путем создания .

На палитре слоев выделяем фоновый слой и жмем на клавиатуре комбинацию клавиш Ctrl+A (Выделить все ). В результате вы должны увидеть рамку выделения из «марширующих муравьев» вокруг фонового слоя. (Как правило, фоновый слой — совпадает по размерам с холстом).

Примечание

Можно выделить фоновый слой еще другим способом — зажмите клавишу Ctrl и щелкните левой кнопкой мыши по фоновому слою. Способ работает, когда этот слой разблокирован (об этом сигнализирует значок замочка, ).

Шаг 2

Теперь нужно выбрать инструмент Перемещение . Когда у нас есть рамка выделения, то кнопки выравнивания станут активными, а значит их можно использовать.

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

Еще пример. Допустим, нужно разместить картинку по центру, но с левого края. Тогда на панели параметров выбираем такие кнопки:

Вариант 2 — в отдельно взятом фрагменте изображения

Допустим, на изображении присутствует фрагмент, внутри которого нужно идеально ровно разместить какую-нибудь картинку. В своем примере я добавил стеклянный квадрат. Пусть внутри него будет находиться другая картинка (кстати, можно научиться самому делать такой стеклянный квадрат).

Шаг 1

Первым делом, по аналогии с первым вариантом, необходимо выделить этот фрагмент. Как этот сделать?

— Если этот фрагмент находится на отдельном слое (как у меня квадрат, который я отдельно вставил), то нужно нажать Ctrl и кликнуть мышью по миниатюре слоя, если он не заблокирован).

— Если этот фрагмент находится в самом изображении, то нужно выбрать инструменты выделения Прямоугольная и Овальная области и с их помощью нарисовать вокруг фрагмента ровную выделенную область. Как пользоваться этими инструментами .Перемещение и, зажав клавишу Shift , нажимате на стрелки направлений на клавиатуре. Картинка будет двигаться с шагом в 10 пикселей.

Если не зажимать эту клавишу, а просто пользоваться стрелками клавиатуры, то картинка будет двигаться с шагом в 1 пиксель.

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

На этой страничке вы найдете ответ на вопрос, каким образом можно отцентровать картинку в блоке. Представленное решение будет проанализировано и будут рассмотрены все положительные и отрицательны эффекты.

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

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

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

Классическое решение

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

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

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

HTML

< div class = "block" > < div class = "img" > < img width= "200" src= "img4.jpg" > < div class = "text" > Текстовый блок

Block { width: 250px; height: 220px; margin: 50px 100px; text- align: center; background: #eee; display: table- cell; vertical- align: middle; html . block img { /* хак для ие6 */ display: block; z- index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */ runtimeStyle. zIndex = 1 , this == ((200 / 2 ) - parseInt(offsetHeight) / 2 ) < 0 ? style. marginTop= "0" : style. marginTop= (200 / 2 ) - (parseInt(offsetHeight) / 2 ) + "px" ) ; } : first- child+ html . block img { /* хак для ие7 */ display: block; z- index: expression( runtimeStyle. zIndex = 1 , this == ((200 / 2 ) - parseInt(offsetHeight) / 2 ) < 0 ? style. marginTop= "0" : style. marginTop= (200 / 2 ) - (parseInt(offsetHeight) / 2 ) + "px" ) ; } . text { color: c7c7c7; margin- left: 70px; }

Результат проведенной работы смотрите на скриншоте ниже.

Альтернативное решение

Есть другой путь для реализации поставленной задачи, однако этот способ не соответствует требованиям семантики. Можно выводить картинку через CSS-свойство background, в котором указать расположение картинки как "center center". Это противоречит семантическим правилам, согласно которым логически значимая картинка должна выводится через тег img.

Ниже приведен код нашего альтернативного решения

Block { width: 250px; height: 220px; margin: 50px auto; background: url(img4. jpg) #eee no-repeat center center; background- size: 200px; display: block; }

В результате использования первого либо второго метода получим один и тот же результат в браузере

При использовании последнего метода опытные программисты выносят код с фоновой картинкой в HTML-документ. Это позволяет ориентироваться в документе и быстро найти блок с картинками. А выглядит это следующим образом:

HTML

< div style= " background:url(img4.jpg) #eee no-repeat center center" >

Плюсы и минусы метода

В сравнении с классическим вариантом, альтернативный вариант обладает следующими преимуществами:

  • убираются какие-либо ограничения с родителя (имеется ввиду определенное позиционирование или эффект обтекания), которые необходимы для оптимальной работы метода;
  • исключается использование expression;
  • не требуется для родительского блока прописывать свойство overflow с соответствующим значением, чтобы обрезать большие картинки;
  • минимизация количества строк кода.

Однако в тоже время метод имеет несколько недостатков:

  • не соблюдение семантических правил;
  • нерешенность вопроса по определению размера изображения.

Подводя итог

Здравствуйте, дорогие читатели моего сайта. Сегодня я расскажу Вам, как выровнять картинки по центру на Вашем сайте.

Для начала немного теории, чтобы все Вы понимали откуда ноги растут. Дело в том, что - это строчный элемент и правильнее было бы его выравнивать при помощи атрибута align, НО! Как мы знаем, чем больше в коде сайта у нас напихано всяческих атрибутов, тем труднее нам будет управлять внешним видом. Все время придется выискивать эти атрибуты и править их.

Собственно, для упрощения нашей дизайнерской работы и придуман был язык стилевой разметки под названием Css. И если можно все делать гораздо проще, то почему бы этим не воспользоваться? Ведь за нас уже давно придумали более простые способы оформить документы веб-ресурса и глупо было бы это игнорировать и не применять.

Ну, к черту лирику, давайте начинать разбираться.

Для начала создам тестовую папку. Положу туда index.html, style.css (файл со стилями) и файл-картинку. Далее создадим "скелет" нашего сайта в индексном файле:

В Css выравнивание элементов осуществляется, как правило, при помощи свойства margin. Но оно работает только для блочных элементов. Как я уже говорил, - элемент строчный. Как же нам сделать так, чтобы наша картинка стала блочной?

Для этого есть волшебное свойство display, которое имеет множество значений, которые позволяют указать браузеру, каким образом ему воспринимать те или иные элементы страницы. По умолчанию у элемента display:inline;, что означает, что этот он строчный. Но в Css мы можем изменять представление того или иного элемента. Написав display:block;, мы говорим браузеру, что данный элемент нужно обрабатывать, как блочный. Так и запишем в нашем файле со стилями.

Далее нужно указать наш margin. Значение у него должно быть "0 auto". Таким образом сверху и снизу отступов не будет, а значение "auto" говорит о том, что отступы по краям будет высчитывать браузер по своей формуле. Я в рассчетах браузера плохо разбираюсь, но догадываюсь, что он смотрит, что никаких конкретных отступов слева и справа нет, а стоит auto. Если auto - это некая переменная, то auto справа равно auto слева. Вот и получается, что браузер откладывает два одинаковых расстояния.

Таким образом, у нас получилось в файле css следующее:

Таким образом получаем картинку, выровненную по центру.


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

Вот и все. Удачной Вам верстки!

P.S: Как Вы, наверное уже догадались, все картинки в данном материале выровнены именно таким способом.