Выравнивание по центру html css. Полное руководство по центрированию DIV-элемента

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

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

Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

CSS - Выравнивание блока по центру

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

... ...

Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

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

Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Выравнивание по горизонтали

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

... ...

Block { margin-left: auto; margin-right: auto; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

... ...

Parent { text-align: center; } .child { display: inline-block; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Выравнивание по вертикали

1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

... ...

Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

Parent { display: table; } .child { display: table-cell; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.

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

Выравнивание блоков по центру

В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

#header{ width / max - width : 800px ; margin : 0 auto ;

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

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

Выравнивание текста по вертикали

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

Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:

div{ background: #ccc; padding: 30px 0; }

div { background : #ccc; padding : 30px 0 ;

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

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

div{ height: 60px; line-height: 60px; }

div { height : 60px ; line - height : 60px ;

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

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

div{ display: table-cell; vertical-align: middle; }

div { display : table - cell ; vertical - align : middle ;

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

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

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

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

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

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

Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием - вы обратились по адресу.

Поговорим о свойстве CSS vertical align

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align ”. Ах, если бы все было так просто…

CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div , то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block; .

Посмотрите пример

Мы хотим центрировать контент, а не сам div!

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

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

Взгляните на этот пример

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

Чтобы это работало, должен быть родительский контейнер с display: table , а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle .

Посмотрите пример

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

Свойство position

Начнем с основ выравнивания по вертикали CSS div :

• position: static - это значение по умолчанию. Элемент отображается в соответствии с порядком HTML ;
• position: absolute - используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static ). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
• position: relative - используется для позиционирования элемента относительно его нормального положения (статического ). Это значение сохраняет порядок потока документа;
• position: fixed - используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index ) работают только в том случае, если для элемента задано значение position (не static ).

Давайте приступим к делу!

Вы хотите осуществить CSS выравнивание по центру по вертикали ? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

• Старое свойство : нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример ;
• Новое свойство CSS3 : можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотреть пример .

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px . Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed ? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента - она всегда будет позиционировать относительно окна браузера.

Вы слышали о спецификации flexbox?

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

Посмотреть пример

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

Если вы примените то, что узнали из этих примеров, то сможете освоить CSS выравнивание блока по вертикали в кратчайшие сроки.

Ссылки и дополнительная литература

Изучение CSS разметки

FlexBox Froggy

Песочница flexbox

Перевод статьи “CSS Vertical Align for Everyone (Dummies Included) ” был подготовлен дружной командой проекта .

Веб-дизайнеры ежедневно используют DIV в работе. Без преуменьшений, это самый популярный тег. Откройте источник любого сайта, и вы увидите, что большая часть, если не две трети объектов заключены в . Даже с приходом HTML5 и появлением серьезных конкурентов в виде article или header, его продолжают повсеместно вставлять в разметку. Поэтому предлагаю вам разобраться с вопросом форматирования и выравнивания блоков div по центру.

Что такое DIV

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

DIV поддерживает все глобальные атрибуты. Но для веб-дизайна вам понадобятся только два - это class и id. Обо всех остальных вы будете вспоминать только в экзотических случаях, и то не факт. Атрибут align, который раньше использовали, чтобы выровнять div по центру или по левому краю, считается устаревшим.

Когда использовать DIV

Представьте себе, что сайт — это холодильник, а DIV — это пластиковые контейнеры, по которым надо рассортировать содержимое. Вы же не будете класть фрукты в одну емкость с ливерной колбасой. Каждый вид продукта вы положите отдельно. Аналогичным образом формируется веб-контент.

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

Document

Теперь разберите каждую секцию детальней. Начните с header. У шапки сайта есть отдельно логотип, навигация, заголовок первого уровня, иногда слоган. Каждому смысловому блоку назначьте свой контейнер. Так вы не только разделите элементы в потоке, но и сделаете легче их форматирование. Вам будет гораздо проще выровнять объект в теге DIV по центру, назначив ему класс или идентификатор.

Выравнивание DIV по центру с помощью полей

При обработке веб-элементов браузер учитывает три свойства: padding, marging и border. Отступы padding - это пространство между контентом и его границей. Margin — поля, отделяющие один объект от другого. Border — это линии вдоль блоков. Они могут быть назначены сразу со всех или только с одной стороны:

div{ border: 1px solid #333; border-left: none; }

Эти свойства добавляют свободное пространство между объектами, а также помогают их выравнивать и размещать нужным образом. Например, если блок с картинкой нужно сместить от левого края к центру на 20%, вы присваиваете элементу margin-left со значением 20%:

Block-with-img{ margin-left: 20%; }

Также элементы можно форматировать используя значения их ширины и отрицательные отступы. Например, есть блок с размерами 200px на 200px. Сначала назначим ему абсолютное позиционирование и сместим его к центру на 50%.

Div{ position: absolute; left: 50%; }

Теперь, чтобы DIV по центру был расположен идеально, задаем ему отрицательный отступ влево, равный 50% его ширины, то есть -100 пикселей:

Margin-left: -100px;

В CSS такой способ называют «удаление воздуха». Но у него есть существенный недостаток в необходимости производить постоянные расчеты, что довольно сложно сделать для элементов с несколькими уровнями вложенности. Если заданы значения padding и border-width, браузер по умолчанию высчитает размеры контейнера как сумму толщины границ, отступов справа, слева и самого контента внутри, что тоже может стать неожиданностью.

Поэтому когда нужно выровнять DIV по центру, используйте свойство box-sizing со значением border-box. Оно не даст браузеру добавлять значение отступов и границ к общей ширине элемента DIV. Чтобы поднять или опустить элемент, также применяйте отрицательные значения. Но назначить в таком случае их можно либо верхнему, либо нижнему полю контейнера.

Как выровнять DIV блок по центру с помощью автоматических полей

Это простой способ центрировать крупные блоки. Вы просто назначаете ширину контейнера и свойство margin со значением auto. Браузер разместит блок посередине с одинаковыми полями слева и справа, выполнив всю работу самостоятельно. В результате, вы не рискуете запутаться в математических расчетах и существенно экономите свое время.

Используйте метод с автоматическими полями при разработке адаптивных приложений. Главное - назначать контейнеру значение ширины в em или процентах. Код из примера выше расположит DIV по центру и на любых устройствах, включая мобильные телефоны, он будет занимать 90% экрана.

Выравнивание через свойство display: inline-block

По умолчанию элементы DIV считаются блочными, и значение display у них стоит block. Для этого метода вам нужно будет переопределить это свойство. Подходит только для DIV с родительским контейнером:

Любой текст

Элементу с классом outer-div назначается свойство text-align со значением center, которое располагает текст внутри по центру. Но пока браузер видит вложенный DIV как блочный объект. Чтобы свойство text-align сработало, inner-div должен восприниматься как строчный. Поэтому в таблице CSS для селектора inner-div вы пишете следующий код:

Inner-div{ display: inline-block; }

Вы меняете свойство display с block на inline-block.

Метод transform/translate

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

transform: translate(50%, 50%);

Функция translate перемещает элемент из его текущей позиции влево/вправо и вверх/вниз. В скобках передаются два значения:

• степень перемещения по горизонтали;
• степень перемещения по вертикали.

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

Transform: translateY(-20%);

В некоторых руководствах можно встретить transform с вендорными префиксами:

Webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);

В 2018 году этого делать больше не нужно, свойство поддерживается всеми браузерами, включая Edge и IE.

Для того чтобы сместить нужный нам DIV по центру, CSS-функция translate записывается со значением 50% для вертикальной и горизонтальной оси. Благодаря этому, браузер сместит элемент с его текущей позиции наполовину от его ширины и высоты. Свойства width и height должны быть обязательно указаны:

Document .nav-bar{ display: block; width: 90%; height: 100vh; margin: 0 auto; background: linear-gradient(to left, red, #f06d06); } .navigation{ width: 50%; height: 50%; color: #FFF; border: 1px dashed #F5F2F2; transform: translate(50%, 50%); } Here goes some text

Учитывайте, что элемент, к которому применяется свойство transform двигается в независимости от окружающих его объектов. С одной стороны, это удобно, но иногда сдвигаясь, DIV может перекрыть собой другой контейнер. Поэтому такой способ центрировать веб-компоненты считается нестандартным и применяют его только в случаях крайней необходимости. Трансформации по всем канонам CSS используют для анимации.

Работа с Flexbox-версткой

Flexbox считается сложным способом верстки веб-макетов. Но если вы ее освоите, то поймете, что она гораздо проще и приятнее, чем стандартное способы форматирования. Спецификация Flexbox — это гибкий и невероятно мощный способ обработки элементов. С английского языка название модуля так и переводится, как «гибкий контейнер». Значения ширины, высоты, расположения элементов настраиваются автоматически, без вычисления отступов и полей.

В предыдущих примерах мы уже работали со свойством display, но задавали ему блочное (block) и строчное (inline-block) значение. Для создания flex-макетов мы будем использовать display: flex. Сначала нам понадобиться flex-контейнер:

Чтобы преобразовать его во флекс-контейнер в каскадных таблицах, мы пишем:

Flex-container{ display: flex; }

Все вложенные в него объекты, но только прямые потомки, будут являться flex-элементами:

Первый Второй Третий Четвертый

Если вовнутрь flex-контейнера поместить список, то пункты списка li не считаются flex-элементами. Flexbox-верстка будет действовать только на ul:

Правила размещения flex-элементов

Чтобы управлять flex-элементами, нужны justify-content и align-items. В зависимости от указанных значений, эти два свойства размещают объекты нужным образом автоматически. Если нам нужно выровнять все вложенные DIV по центру, мы записываем justify-content: center, align-items: center и больше ничего. Всю остальную работу браузер выполнит сам:

Document .flex-container{ display: flex; justify-content: center; align-items: center; } Первый Второй Третий Четвертый

Чтобы выровнять текст по центру DIV, которые являются flex-элементами, можно использовать стандартный прием text-align. Или вы можете каждый вложенный DIV также сделать flex-контейнеров и управлять содержимым с помощью justify-content. Такой способ гораздо рациональнее, если внутри содержится разнообразный контент, включая графику, другие вложенные объекты, включая многоуровневые списки.

Если разрезать любой сайт, созданный на основе html , то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div по центру вашего сайта:

Преимущества верстки с помощью тега

Существует два основных типа построения структуры сайта:

• Табличная;
• Блочная.

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

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

Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

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

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

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit ,
Где:

• left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
• right – выравнивание справа, обтекание остальными элементами – слева;
• none – обтекание не допускается;
• inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :

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

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto ):

#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }

Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div :

• display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
• vertical-align: middle – выравнивает элемент посредине относительно родительского;
• margin-left – устанавливает отступ слева.

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%.

Скрытие и отображение блочных элементов

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript , меняющая значение свойства css display после нажатия на кнопку (событие onclick ).

Синтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений (inline-block ) мы реализовали выравнивание div внутри div по центру.

Для скрытия и показа слоя мы использовали два значения свойства display .