Влад Мержевич

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

Выравнивание

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега , а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

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

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

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

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

Пример 2. Использование valign

Выравнивание

Колонка 1 Колонка 2

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

Пример 3. Применение стилей для выравнивания

Выравнивание

Колонка 1 Колонка 2

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

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

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

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

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

Выравнивание

(18.6)

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

Выравнивание элементов формы

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

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

Пример 5. Выравнивание полей формы

Выравнивание

Имя
E-mail
Комментарий

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

  • 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 .

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

    Да, для вертикального выравнивания в 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 .

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

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

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

    Часто в декоративных целях требуется задать тексту выравнивание по центру, CSS в этом случае позволяет сократить время верстки. Раньше это делалось с помощью HTML-атрибутов, теперь же стандарт требует выравнивать текст с помощью таблиц стилей. В отличие от блоков, для которых нужно изменять внешние отступы, в CSS выравнивание текста по центру производится с помощью одной строки:

    • text-align:center;

    Это свойство наследуется и передается от родителя всем потомкам. Влияет не только на текст, но и на другие элементы. Для этого они должны быть строчными (например, span) или строчно-блочными (любые блоки, которым задано свойство display: block). Последний вариант позволяет также изменять ширину и высоту элемента, более гибко настраивать отступы.

    Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.

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

    Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):

    • margin:0 auto;

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

    Выравнивание блока по левому или правому краю

    Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой - с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:

    • .left {float:left;}
    • .right{float:right}

    Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:

    • .left {float:left;}
    • .right{float:right}
    • footer {clear:both}

    Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.

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

    Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:

    • выравнивание по верхней границе — .child{vertical-align:top};
    • выравнивание по центру — .child{vertical-align:middle};
    • выравнивание по нижней границе — .child{vertical-align:bottom};

    На блочные элементы ни text-align, ни vertical-align не действуют.

    Возможные проблемы с выровненными блоками

    Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и.third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит.second и.third. CSS-код:

    • .second{float:left}
    • .third{float:right}
    • .clearfix{height:0; clear: both;}

    Часто используются псевдокласс:after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри.first и содержит.left и.right):

    • .left{float:left}
    • .right{float:right}
    • .container:after{content:""; display:table; clear:both;}

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

    Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.

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