Выравнивание блоков css. Если текст занимает одну строчку, например, для кнопок и пунктов меню

Что такое DIV

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

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

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

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

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

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

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

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

Эти свойства добавляют свободное пространство между объектами, а также помогают их выравнивать и размещать нужным образом. Например, если блок с картинкой нужно сместить от левого края к центру на 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:

Функция 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 должны быть обязательно указаны:

Учитывайте, что элемент, к которому применяется свойство 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 и больше ничего. Всю остальную работу браузер выполнит сам:

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

В 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+

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

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

Скорее всего вы уже знаете о существовании замечательного свойства CSS vertical-align. И сам Бог велел нам пользоваться для вертикального выравнивания именно этим свойством (не зря же оно носит такое, говорящее само за себя, название).

Постановка задачи: Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.

Теперь приступим к решению поставленной задачи.

И так, у нас есть блок, высота его может меняться:

Первое, что приходит в голову – это сделать следующий финт:

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

Но не тут-то было! Никакого ожидаемого выравнивания по центру таким образом мы не добьемся. А почему? Казалось бы все указано правильно. Оказывается вот в чем загвоздка: свойство vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для выравнивания строчных элементов друг относительно друга.

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

Вертикальное выравнивание строчных элементов

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

Вас приветствует кусок текста!

Под строчным тегом понимается контейнер, появление которого не приводит к переносу содержимого на новую строку.

Действие же блочного тега приводит к переносу содержимого контейнера на новую строку.

– это блочный тег. Если мы заключим куски текста в блоки

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

, является строчным, переноса контейнеров на новую строку не будет, все контейнеры останутся в одной строке.

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

Для контейнеров применим следующие свойства CSS:

#perviy{ vertical-align:sub; } #vtoroy{ vertical-align:3px; } #tretiy{ vertical-align:-3px; }

В результате строка текста будет иметь вот такой вид:

Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.

Мы немного отвлеклись, теперь возвращаемся к нашей основной задаче.

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

Не смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align . Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align работает для ячеек таблицы.

Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

Ха, оказывается очень просто.

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

Пусть у нас есть div класса textalign:

Для данного блока указываем следующее CSS-свойство:

Textalign{ display: table-cell; }

Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.

Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.

Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:

• Способ с применением дополнительного вспомогательного div-котнейнера
• Способ с использованием expression-а . Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
• Использование свойства line-height . Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
• Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.

Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.

Условный комментарий

Конструкция вида:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

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

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

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

Решение задачи

Из-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:

Для div-контейнера класса textalign задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):

Display: table-cell; vertical-align: middle;

И еще два свойства, которые задают ширину и высоту для блока:

Width:500px; height: 500px;

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

Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE (именно для них мы использовали дополнительные блоки div и span ):

Обращаемся к тегу div внутри блока класса textalign . Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.

Textalign div{ position: absolute; top: 50%; }

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

Соответственно, стили заданные для блока textalign видоизменяются:

Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; }

Теперь левая верхняя точка текстового блока смещена вниз на 50%.

Для пояснения происходящего я нарисовал иллюстрацию:

Как видно из картинки, определенного прогресса мы добились. Но это еще не все! Верхняя левая точка желтого блока действительно сместилась на 50% вниз, относительно родительского (фиолетового) блока. Но нам-то нужно, чтобы на пятидесяти процентах высоты фиолетового блока находился центр желтого блока , а не его верхняя левая точка.

Теперь в ход пойдет тег span и его относительное позиционирование:

Textalign span{ position: relative; top: -50%; }

Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!

Немного подшаманим

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

Есть небольшая проблемка. Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.

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

Детально познакомиться со свойством overflow можно в .

Окончательный вид CSS-инструкций для блока textalign имеет вид:

Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px solid black; }

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

Центровка в блоке переменной высоты

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

Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign превращается именно в ячейку таблицы, благодаря свойству display:table-cell ).

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

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

Классу textalign мы изменим значение свойства display с table-cell на table и убирем директиву выравнивания vertical-align: middle . Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.

Таким образом, CSS-свойства для блока класса textalign будут иметь следующий вид:

Textalign{ display: table; width:500px; height: 100%; position: relative; overflow: hidden; border: 1px solid black; }

Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign (это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell , тогда он унаследует высоту в 100% от родительского блока textalign (фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle .

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

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

Вот и вся хитрость. При желании, вы можете переменной высоты с отцентрованным содержимым.

Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить .