Все способы вертикального выравнивания в CSS. Горизонтальное и вертикальное выравнивание элементов

Сегодня, уважаемый читатель, мы с вами разберемся с проблемой вертикального выравнивания в блоке 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; }

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

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

  • CSS ,
  • HTML

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

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


    Сравним следующие подходы. Выравнивание с помощью:

    • таблицы,
    • отступов,
    • line-height ,
    • растягивания,
    • отрицательного margin ,
    • transform ,
    • псевдоэлемента,
    • flexbox .
    В качестве иллюстрации рассмотрим следующий пример.

    Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .


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

    Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

    Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

    Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

    Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
    После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
    http://jsfiddle.net/c1bgfffq/

    Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

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

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

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

    http://jsfiddle.net/c1bgfffq/1/

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

    Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.


    .outer-wrapper { display: table; } .outer { display: table-cell; }
    Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

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

    Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

    Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
    http://jsfiddle.net/c1bgfffq/6/

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

    Выравнивание с помощью line-height

    Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

    Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
    http://jsfiddle.net/c1bgfffq/12/

    Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

    Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
    http://jsfiddle.net/c1bgfffq/15/

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

    Выравнивание с помощью "растягивания"

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

    Для этого нужно:

    1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
    2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
    3. установить значение auto для вертикальных отступов внутреннего блока.
    .outer { position: relative; } .inner { height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
    http://jsfiddle.net/c1bgfffq/4/

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

    Выравнивание с помощью отрицательного margin-top

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

    Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

    Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
    http://jsfiddle.net/c1bgfffq/13/

    Минус данного способа - должна быть известна высота внутреннего блока.

    Выравнивание с помощью transform

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

    Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
    http://jsfiddle.net/c1bgfffq/9/

    Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

    Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

    Выравнивание с помощью Flexbox

    Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

    Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

    Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
    http://jsfiddle.net/c1bgfffq/14/

    Минус данного способа − Flexbox поддерживается только современными браузерами.

    Какой способ выбрать?

    Нужно исходить из постановки задачи:
    • Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
    • Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
    • Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
    • Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

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

    1. Горизонтальное выравнивание по центру блока/страницы

    1.1. Если для блока задана ширина:

    div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }

    Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

    1.2. Если блок вложен в другой блок и для него не задана/задана ширина:

    .wrapper {text-align: center;}

    1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:

    .wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/} .box { width: 400px; position: absolute; left: 50%; margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/ }

    1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:

    .wrapper {text-align: center; /*располагаем содержимое блока по центру*/} .box { display: inline-block; /*располагаем блоки в ряд по горизонтали*/ margin-right: -0.25em; /*убираем правый отступ между блоками*/ }

    2. Вертикальное выравнивание

    2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:

    .button { height: 50px; line-height: 50px; }

    2.2. Для выравнивания блока по вертикали внутри родительского блока:

    .wrapper {position: relative;} .box { height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; }

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

    .wrapper { display: table; width: 100%; } .box { display: table-cell; height: 100px; text-align: center; vertical-align: middle; }

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

    .wrapper { position: relative; } .box { height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*чтобы контент не расползался*/ }

    2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

    если для элемента заданы размеры

    div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }

    если для элемента не заданы размеры и он не пустой

    Some text here

    h1 { margin: 0; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }

    Веб-дизайнеры ежедневно используют 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

    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

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

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

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

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


    Сравним следующие подходы. Выравнивание с помощью:

    • таблицы,
    • отступов,
    • line-height ,
    • растягивания,
    • отрицательного margin ,
    • transform ,
    • псевдоэлемента,
    • flexbox .
    В качестве иллюстрации рассмотрим следующий пример.

    Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .


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

    Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

    Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

    Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

    Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
    После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
    http://jsfiddle.net/c1bgfffq/

    Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

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

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

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

    http://jsfiddle.net/c1bgfffq/1/

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

    Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.


    .outer-wrapper { display: table; } .outer { display: table-cell; }
    Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

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

    Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

    Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
    http://jsfiddle.net/c1bgfffq/6/

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

    Выравнивание с помощью line-height

    Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

    Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
    http://jsfiddle.net/c1bgfffq/12/

    Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

    Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
    http://jsfiddle.net/c1bgfffq/15/

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

    Выравнивание с помощью "растягивания"

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

    Для этого нужно:

    1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
    2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
    3. установить значение auto для вертикальных отступов внутреннего блока.
    .outer { position: relative; } .inner { height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
    http://jsfiddle.net/c1bgfffq/4/

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

    Выравнивание с помощью отрицательного margin-top

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

    Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

    Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
    http://jsfiddle.net/c1bgfffq/13/

    Минус данного способа - должна быть известна высота внутреннего блока.

    Выравнивание с помощью transform

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

    Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
    http://jsfiddle.net/c1bgfffq/9/

    Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

    Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

    Выравнивание с помощью Flexbox

    Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

    Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

    Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
    http://jsfiddle.net/c1bgfffq/14/

    Минус данного способа − Flexbox поддерживается только современными браузерами.

    Какой способ выбрать?

    Нужно исходить из постановки задачи:
    • Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
    • Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
    • Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
    • Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

    Теги: Добавить метки