Css выравнивание div в div по вертикали – Центрирование div по горизонтали и вертикали. Вертикальное выравнивание в div. Бонус: условные комментарии

1001-ый способ вертикального выравнивания / Habr

О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).


Разметка

Сразу оговорюсь, способ имеет недостаток, а именно, лишний элемент. Разметка будет выглядеть так, как показано ниже:
<div>
    <div>Текст, который заключён во внутренний блок. </div>
    <div></div>
</div>

Описываемый метод основан на том, что vertical-align:middle нормально работает для инлайновых элементов. Так как в нашем случае инлайновые элементы не подойдут, используется смешанный тип (display:inline-block) для их эмуляции. Таким образом, если нам удастся представить внутреннее содержимое div.parent как строку, а div.child в ней выровнять по центру, используя vertical-align:middle, то мы достигнем результата.


Стили

Первая идея, которая возникает — задать принудительно высоту строки внутреннего содержимого с помощью line-height в 100% от высоты div.parent — отпадает, т.к. влечёт за собой изменение высоты строки внутри div.child, а переопределение line-height внутри div.child к положительному результату не приводит. На помощь приходит та самая распорка из 90-ых. Добавленный блок Div.helper должен иметь высоту div.parent, тем самым раздвигая нашу строку, как нам нужно. В результате можно выделить значащий CSS:

.child {
    ...
    display:inline-block;
    vertical-align:middle;
}
.helper {
    ...
    display:inline-block;
    vertical-align:middle;
    height:100%;

    width:0px;
}


Боремся с IE

Применяем хак для IE, который позволит использовать display:inline-block для блочных элементов (а также хак для FF2):

.child {
    ...
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    zoom:1;
    //display:inline;
}
.helper {
    ...
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
    zoom:1;
    //display:inline;
}


Результат

Вот такой простенький способ. Работающий пример можно посмотреть здесь.

css — Как выровнять по высоте 3 дива?

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация
  4. текущее сообщество

Выравнивание текста по вертикали и по центру с помощью CSS.

Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.

Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.

Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.

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

Для блочных элементов свойство vertical-align не работает.

Есть два способа, как можно выйти из этой ситуации:

Для тех, кто предпочитает все смотреть в видео:

Для тех, кто любит текст, читайте ниже способ решения этой проблемы.

Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.

<table>
<tr>
<td>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</td>
</tr>
</table>

выравнивание текста по вертикали css

Способ Б. Использовать своство display:table-cell;

<div>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</div>

Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.

выравнивание текста по вертикали css

Ситуация 1. Выравнивание одной строки текста. 

Рассмотрим простой пример.

<div>Строка, которая должна быть выровнена по вертикали</div>

Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.

<div>Строка, которая должна быть выровнена по вертикали</div>

Выравнивание по вертикали одной строки CSS

Этот способ хорошо работает, когда у вас всего одна строка с текстом.

Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.

Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.

<div>
<div>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</div>
</div>

выравнивание текста по вертикали css

Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

Если не нужна поддержка старых браузеров, этот вариант будет самым оптимальным.

Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.

Все про CSS выравнивание

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

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

Проще всего с помощью 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».

А это inline-элемент. Здесь несколько оранжевых
строчек. Они выравниваятся
за счет установленной высоты строки блока-родителя.

.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» для центрирования контента внутри.

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

Lama
.example-wrapper7{
display: flex; 
height: 300px;  
background: #AEB96A;
}

.example-wrapper7 img{
margin: auto;
}

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

Выравнивание блока div по вертикали и горизонтали по центру абсолютным позиционированием.

Если с выравниванием блоков div по горизонтали ситуация более менее ясная, то с выравниванием по вертикали, как правило, возникают трудности. Здесь не все так просто и добавлением лишь одного стиля CSS, блок по вертикали не выравняешь. Нужно использовать комбинацию стилей CSS.

Давайте сейчас ее и рассмотрим.

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

Итак, предположим, что у нас есть блок div с id #container, который является контейнером. По центру этого блока нужно расположить вложенный блок с id #inner:

<div>
   <div>
        Содержимое
    </div>
</div>

Эти блоки имеют  ширину, высоту и цвет фона, которые задаются стилями CSS:

#container {   
    background:#6BB533;
    height:400px;
    width:400px;
}
#inner {
    background:#fcfcfc;
    height:100px;
    width:100px;   
}

В браузере это выглядит сейчас следующим образом:

20-10-2013 9-15-47

Задача в том, чтобы выровнять вложенный блок по центру блока контейнера.

Сделать это можно отредактировав стили CSS следующим образом:

#container {   
    background:#6BB533;
    height:400px;
    width:400px;
    position: relative;   
}
#inner {
    background:#fcfcfc;
    height:100px;
    width:100px;
    margin:auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;   
}

Стили, которые были добавлены, выделены красным цветом. Это и есть та минимальная комбинация стилей CSS, которая заставит блок выравняться по центру.

Теперь блок будет отображаться по вертикали и горизонтали и по центру

20-10-2013 9-29-16

Вот живой пример:

Если в качестве блока контейнера вы хотите использовать элемент body, то к стилям CSS нужно добавить следующее:

html, body { height:100%; }

Надеюсь эти стили помогут вам решить проблему с вертикальным выравниванием блоков div по центру. Успехов!

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

Яндекс Метрика и Google Analytics. Цели, события, отчеты.

20-10-2013 9-29-16

Подробнее здесь. Обращайтесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *