Выравнивание span по вертикали css. Все способы вертикального выравнивания в CSS
Все, кто занимаеться версткой, рано или поздно сталкиваются с необходимостью выравнивать элементы по вертикали... и знают, какие сложности могут возникнуть при выравнивании элемента по центру. В CSS есть свойство `vertical-align` со множеством значений которое, по логике, и должно выполнять вертикальное выравнивание. Однако на практике оно работает совсем не так, как ожидается.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
1. Выравнивание с помощью таблицы
В этом случае мы заменяем внешний блок таблицей из одной ячейки. Выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
HTML
CSS
Outer { width : 200px ; height : 200px ; text-align : center ; vertical-align : middle ; background-color : #ffc ; }
Основной минус данного решения, с точки зрения семантики - применение таблицы не по прямому назначению. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично невилировать, заменив теги таблицы на div и задав табличный режим отображения в CSS.
HTML
CSS
Outer-wrapper { display : table ; } .outer { display : table-cell ; }
2. Выравнивание с помощью отступов
При условии, если нам известны высоты внутреннего и внешнего блоков, выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.
CSS
Outer { height : 200px ; } .inner { height : 100px ; margin : 50px 0 ; }
Минусом решения есть обязательное знание высоты обоих блоков.
3. Выравнивание с помощью line-height
Если внутренний блок занимает не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переходить на вторую строку, желательно также добавить правила white-space: nowrap и overflow: hidden .
CSS
Outer { height : 200px ; line-height : 200px ; } .inner { white-space : nowrap ; overflow : hidden ; }
Данный способ можно использовать и для выравнивания многострочного текста. Для этого внутреннему блоку нужно переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
CSS
Outer { height : 200px ; line-height : 200px ; } .inner { line-height : normal ; display : inline-block ; vertical-align : middle ; }
Минус способа - должна быть известна высота внешнего блока.
4. Выравнивание с помощью “растягивания”
Данный способ можно применять, когда высота внутреннего блока нам известна, а внешнего - нет.
Чтобы применить данный метод нам необходимо:
- Внешнему блоку завдать относительное позиционирование position: relative , а внутреннему − абсолютное position: absolute ;
- Внутреннему блоку добавить несколько правил top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- Для вертикальных отступов внутреннего блока установить значение auto .
CSS
Outer { position : relative ; } .inner { height : 100px ; position : absolute ; top : 0 ; bottom : 0 ; margin : auto 0 ; }
5. Выравнивание с помощью отрицательного margin-top
Аналогично предыдуему, данный способ применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. После чего сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -Hinner / 2 .
CSS
Outer { position : relative ; } .inner { height : 100px ; position : absolute ; top : 50% ; margin-top : -50px ; }
Минус данного способа - должна быть известна высота внутреннего блока.
6. Выравнивание с помощью transform
Способ может применятся когда высота внутреннего блока неизвестна. Необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% , после чего воспользоваться свойством transform и поднять его обратно вверх с помощью функции translateY(-50%) .
CSS
Outer { position : relative ; } .inner { position : absolute ; top : 50% ; transform : translateY (-50% ); }
7. Выравнивание с помощью псевдоэлемента
Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.
Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. Таким образом, высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Чтобы не нарушать семантику, строчный блок желательно добавлять с помощью псевдоэлементов before или after .
CSS
Outer :before { display : inline-block ; height : 100% ; vertical-align : middle ; content : "" ; } .inner { display : inline-block ; vertical-align : middle ; }
Минус данного способа - невозможно примнять при абсолютном позиционировании внутреннего блока.
8. Выравнивание с помощью Flexbox
Самым современным способом вертикального выравнивания является применение Flexible Box Layout (или сокращенно Flexbox ). Он позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
Проблема вертикального центрирования элементов в CSS имеет ряд готовых решений. Выбор способа выравнивания в каждом отдельном случае зависит от типа, размеров, позиционирования элементов и других заданных им свойств.
Ниже представлены популярные у верстальщиков приемы выравнивания по вертикали. Показывается, как они работают, и для каких случаев наиболее подходит каждый из них.
Вот два элемента div:
Каждый из способов будет применен для выравнивания внутреннего блока по центру наружного.
line-height для одной строки
Когда родитель занимает одну строку текста и высота потомка известна, можно применить свойство line-height. Значение свойства должно быть равным высоте внешнего блока. Это работает только для одной строки, поэтому потомку полезно добавить overflow: hidden и запрет переноса строки white-space: nowrap.
Не получится воспользоваться процентной записью line-height=100%, потому что 100% в этом случае — высота шрифта.
Container {
height: 300px;
line-height: 300px;
}
Inner {
white-space: nowrap;
overflow: hidden;
}
Способ применим только при известной высоте внешнего блока.
Таблица с vertical-align
Для вертикального выравнивания элементов как нельзя лучше подходит таблица. Чтобы не нарушать семантику, табличные элементы лучше создавать средствами CSS. Положением содержимого ячейки управляет vertical-align. В таблицах работают четыре значения этого свойства:
Baseline — по умолчанию;
. bottom — содержимое внизу ячейки;
. middle — содержимое посередине ячейки;
. top — содержимое вверху ячейки.
В первом примере внешним блоком становится одинокая ячейка таблицы.
Container {
display: table-cell;
vertical-align: middle;
}
Способ хорош тем, что работает для элементов без заданной высоты, но в некоторых случаях его использованию мешает тот факт, что внешний блок, как любая ячейка таблицы, по ширине подстраивается под свое содержимое, а растянуть его можно только задав ширину для width явно. Для ячейки без таблицы проценты работают неадекватно.
Этот недостаток исправляется обертыванием ячейки в родителя со свойством display:table. Этому элементу размер можно задать в процентах. Окончательно код будет выглядеть так:
Outer-wrapper {
display: table;
}
Container {
display: table-cell;
vertical-align: middle;
}
Position: absolute + отрицательный margin
Способ применяется, когда известна высота внутреннего элемента. Для внешнего блока она может быть неизвестной. Родителю задается относительное позиционирование, а потомку внутри него абсолютное.
Значение свойства top, равное 50%, заставляет вложенный элемент расположиться верхним краем посередине внешнего блока. Остается поднять его отрицательным margin-top на половину собственной высоты, чтобы он встал точно по центру вертикали.
Container {
position: relative;
}
Inner {
height: 140px;
position: absolute;
top: 50%;
margin-top: -70px;
}
Недостаток этого способа в необходимости знать высоту потомка.
Выравнивание в строке с vertical-align
Выравнивание строчных и строчно-блочных элементов, включая изображения и иконки, в окружающем их тексте осуществляется свойством vertical-align. В отличие от таблицы, в этом случае работает весь набор его значений, указанных в спецификации.
При известной высоте родителя этим свойством можно воспользоваться для центрирования многострочного текста.
Для внешнего блока прописывается центрирование одной строки.
Container {
height: 140px;
line-height: 140px;
}
Значение line-height для внутреннего блока переопределяется на normal или на любую требуемую величину. Ему же задается выравнивание vertical-align: middle и преобразование в строчно-блочный тип — display: inline-block.
Inner {
display: inline-block;
line-height: normal;
vertical-align: middle;
}
Недостаток способа — надо знать высоту родителя.
Выравнивание с помощью transform
Функция translateY свойства transform позволяет отцентрировать внутренний блок с неизвестной высотой. Для этого родитель должен быть спозиционирован относительно, а потомок — абсолютно.
Свойство top со значением 50% опускает внутренний блок так, что его верхний край располагается посередине родителя. Значение translateY: -50%, поднимает элемент на половину его собственной высоты и тем самым совмещает вертикальные центры блоков.
Container {
position: relative;
}
Inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Недостаток приема в ограниченной поддержке функций transform браузером IE.
Выравнивание через псевдоэлемент
Способ работает, когда высота неизвестна ни для первого, ни для второго блока. Внутрь родителя с помощью before или after добавляется строчный псевдоэлемент inline-block. Высота добавленного элемента должна равняться высоте родителя — height: 100%. Вертикальное выравнивание содержимого задается посредством vertical-align: middle.
С помощью vertical-align: middle относительно этого псевдоэлемента выравнивается внутренний блок. Так как родитель и потомок имеют одинаковую высоту, внутренний элемент, выравниваясь по вертикали с псевдоэлементом, центрируется также и с внешним блоком.
Container:before {
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}
Inner {
display: inline-block;
vertical-align: middle;
}
Универсальный способ. Не работает если внутреннему блоку задано абсолютное позиционирование.
Flexbox
Самый новый и простой способ выравнивания элементов по вертикали. Flexbox позволяет расставлять элементы Web-страницы как угодно. Чтобы выровнять блок по центру, достаточно родителю прописать display: flex, а потомку margin: auto.
Container {
display: flex;
width: 320px;
height: 140px;
}
Inner {
width: 120px;
margin: auto;
}
Flexbox работает только в современных браузерах.
Выбор способа
Какой техникой вертикального выравнивания воспользоваться зависит от задачи и тех, ограничений, которые могут присутствовать в каком конкретном случае.
Высота элементов неизвестна
В этой ситуации можно воспользоваться одним из четырех универсальных способов:
1. Таблица. Родителем становится ячейка таблицы, созданная в HTML или через display-table/display-cell. Этому элементу-родителю присваивается vertical-align: middle.
2. Псевдоэлемент. Для внешнего блока создается строчно-блочный псевдоэлемент с width=100% и vertical-align: middle. Потомку прописываются display: inline-block и vertical-align: middle. Способ не работает только когда внутреннему блоку задано абсолютное позиционирование.
3. Transform. Родитель получает position: relative. Потомку присваивается position: absolute, top: 50% и transform: translateY(-50%);
4. Flexbox. Внешнему блоку ставится display: flex, внутреннему — margin: auto.
Известна только высота потомка
Внешний блок позиционируется относительно; внутреннему элементу прописываются абсолютное позиционирование, top: 50% и margin-top, равный половине его высоты.
Одна строка в блоке с известной высотой
Внешнему блоку задается свойство line-height со значением, равным его высоте.
Высота внешнего блока известна, а внутреннего элемента - нет.
Родителю ставится line-height равный его высоте. У потомка значение line-height переопределяется на normal или на любую требуемую величину, и задаются ему display: inline-block и vertical-align: middle.
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button { height: 50px; line-height: 50px; }2.2. Для выравнивания блока по вертикали внутри родительского блока:
2.3. Вертикальное выравнивание по типу таблицы:
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
если для элемента не заданы размеры и он не пустой
Some text here
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в 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/
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью "растягивания"
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.Для этого нужно:
- задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
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 выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).
Выравнивание при помощи padding
Иногда можно не центрировать элемент, а добавить ему границы свойством "padding ".
Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.
.example-wrapper1 { background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; }Выравнивание абсолютно позиционированных блоков
Если для блока задано "position: absolute ", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top ","right ","bottom ","left ") внутреннего блока присвоить одинаковое значение, а также "margin: auto".
*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).
.example-wrapper2 { position : relative ; height : 250px ; background : url(space.jpg) ; } .cat-king { width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ; }Горизонтальное выравнивание
Выравнивание посредством "text-align: center"
Для выравнивания текста в блоке есть специальное свойство "text-align ". При установленном значении "center " каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.
Однажды мне пришлось придумывать текст, чтобы показать, как работает выравнивание текста при помощи CSS, но ничего интересного в голову не приходило. Сначала решила скопировать где-то детский стишок, но вспомнила, что это, возможно, подпортит уникальность статьи, и наши дорогие читатели не смогут найти ее в Гугле. И тогда я решила написать вот этот вот абзац - ведь суть не с нем, а суть в выравнивании.
.example-text { text-align : center ; padding : 10px ; background : #FF90B8 ; }Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов ("display: inline").
А вот этот текст выровнен по левому краю, зато он находится в блоке, который выравнивается относительно обертки по центру.
.example-wrapper3 { text-align : center ; background : #FF90B8 ; } .inline-text { display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; }Выравнивание блоков при помощи margin
Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto " (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.
.lama-wrapper { height : 200px ; background : #F1BF88 ; } .lama1 { height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; }Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) - он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.
Вертикальное выравнивание
С вертикальным выравниванием намного больше проблем - по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.
Выравнивание свойством line-height
В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height " и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах.
.example-wrapper4 { line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; }Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle".
.example-wrapper5 { line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; } .example-wrapper5 .text1 { display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; }У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.
Выравнивание по вертикали в таблицах
Свойство "vertical-align " также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell ".
Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом.
.one_product .img_wrapper { display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; } .one_product img { max-height : 169px ; max-width : 100% ; min-width : 140px ; display : block ; margin : 0 auto ; }Следует помнить, что если у элемента установлено "float" отличное от "none", то он в любом случае будет блочным (display: block) - тогда придется использовать дополнительный блок-обертку.
Выравнивание дополнительным inline-элементом
И для inline-элементов можно применить "vertical-align: middle ". При этом все элементы с "display: inline ", которые находятся в одной строке, выровняются относительно общей центральной линии.
Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы:before или:after.
.example-wrapper6 { height : 300px ; text-align : center ; background : #70DAF1 ; } .pudge { display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : #fff ; width : 200px ; height : 200px ; } .riki { display : inline-block ; height : 100% ; vertical-align : middle ; }Display: flex и выравнивание
Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять "display: flex". Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать "margin: auto" для центрирования контента внутри.
Пока что такой способ практически не встречался мне, но особых ограничений для него нет.
Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!