Сегодня, уважаемый читатель, мы с вами разберемся с проблемой вертикального выравнивания в блоке 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. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:
.textalign div{ position: absolute; top: 50%; } .textalign span{ position: relative; top: -50%; }
Есть небольшая проблемка. Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.
Решение проблемы: нужно добавить свойство 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; }
Вот и вся хитрость. При желании, вы можете переменной высоты с отцентрованным содержимым.
Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить .
Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.
Горизонтальное выравнивание margin: autoВыравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:
Elem { margin-left: auto; margin-right: auto; width: 50%; }
Указание значения auto правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.
text-align: centerДанный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:
Выравнивание с помощью text-align .wrapper { text-align: center; }
Я выровнен по центру
position и отрицательный margin влевоПодойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:
Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }
Я выровнен по центру
display: inline-block + text-align: centerСпособ подходит для выравнивания блоков неизвестной ширины, но требует обертку-родителя. Например таким образом можно центрировать горизонтальное меню:
Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }
Вертикальное выравнивание line-heightДля выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.
line-height .wrapper { height: 100px; line-height: 100px; }
Я выровнен по вертикали
position и отрицательный margin вверхЭлемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:
Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }
Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.
display: table-cellДля вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :
Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }
Я выровнен по вертикали
Динамическое выравнивание элемента на страницеМы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.
Подключим jQuery на страницу:
Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter() . В качестве аргумента функции выступает сам элемент:
Function alignCenter(elem) { // код здесь }
В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:
Function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" // не забывайте добавить элементу position: absolute для срабатывания координат }) }
В первой строчке функции мы получаем ширину документа и отнимаем от нее ширину элемента, деленную пополам — это и будет центр страницы по горизонтали. Вторая строка делает то же самое, только с высотой, для выравнивания по вертикали.
Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:
$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" }) } })
Применение FlexboxПостепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента.wrapper и центрируем контент внутри:
Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ } Lorem ipsum dolor sit amet
Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.
Ресурсы по теме Помощь проектуОчень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
Вариант 2. Автоматический отступ. Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя , если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.
Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
Вариант 3. Таблица. Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
Parent { width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner { display: table-cell; text-align: center; vertical-align: middle; } } .block { display: inline-block; img { display: block; border: none; } }
Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3 .
Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ""; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }
Либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
Parent { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ""; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }
Вариант 5. Flexbox. Одним из самых простых и элегантных способов является использования flexbox. Он не требует лишних телодвижений, достаточно понятно описывает суть происходящего, обладает высокой гибкостью. Единственное, что стоит помнить при выборе данного способа - поддержка IE от 10-й версии включительно. caniuse.com/#feat=flexbox
Parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; } .block { background: #60a839; img { display: block; border: none; } }
Вариант 6. Transform. Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script"а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .
Parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; } .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); img { display: block; } }
Вариант 7. Кнопка. Пользователь вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.
Parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; } .block { display: inline-block; img { display: block;; border: none; } }
Бонус Используя идею 4-го варианта, можно задавать внешние отступы для блока , и при этом последний будет адекватно отображаться в окружении скроллбаров.Пример: jsfiddle.net/serdidg/nfqg9rza/2 .
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя
, масштабировать её по размеру родителя
.
Пример: jsfiddle.net/serdidg/nfqg9rza/3 .
Пример c большой картинкой:
В 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+
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+
1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
... ...
Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
Parent { display: table; } .child { display: table-cell; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.
Синтаксис CSS vertical-align
... vertical-align : value ; ...- baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя)
- bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
- middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
- sub - отображение происходит под строкой (выглядит как подстрочный индекс)
- super - отображение происходит над строкой (как верхний индекс)
- text-bottom - выравнивание нижней границы элемента по нижнему краю строки
- text-top - выравнивание верхняя границы элемента по верхнему краю строки
- top - выравнивание верхняя края элемента по верху самого высокого элемента строки
- inherit - наследует значение родителя
- значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
- проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
Значение vertical-align по умолчанию:
- baseline (для строчных элементов)
- middle (для ячеек таблицы)
Чаще всего vertical-align используется в ячейках таблиц. В теге
или | |||||
Выравнивание по верху |
Выравнивание по середине |
Выравнивание по низу |
Выравнивание по верху |
Выравнивание по середине |
Выравнивание по низу |
Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub Пример 2. Значения vertical-align: абсолютные значения и проценты
Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.
.vert_align_abs_plus { display : inline-block ; vertical-align : 10px ; background : #aaa ; } .vert_align_abs_minus { display : inline-block ; vertical-align : -5px ; background : #aaa ; } .vert_align_per_plus { display : inline-block ; vertical-align : 50% ; background : #aaa ; } .vert_align_per_minus { display : inline-block ; vertical-align : -30% ; background : #aaa ; }Преобразуется на странице в следующее:
Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз
Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).
Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:
object.style.verticalAlign ="VALUE "