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

Февраль 07, 2011 ||  css ||  комментарии

21 век, человек побывал на луне, сделан искусственный глаз, даже с зумом! и бля – нет простого очевидного способа вертикально выровнять элемент в CSS )

Столкнулся с дизайном в котором надо было сделать строку элементов разной высоты выровненной вертикально, вроде этого:

vertical centering

На самом деле задача дробится на две – случай когда у нас одна строка выравнивается вертикально и когда несколько. Второй случай несколько сложнее. Само собой желательно иметь решение не зависящее от высоты контейнера.

Одна строка

<div class="line">
    <span>Facebook</span>
    <a href=""><img src="facebook.png" ></a>
    <span>Twitter</span>
    <a href=""><img src="twitter.png" ></a>
</div>

Два способа работающих во всех браузерах кроме IE6:

.line{
    display: table-row;
}
.line span{
    display: table-cell;
    vertical-align: middle;
}
.line a{
    display: table-cell;
    vertical-align: middle;
}
.line{

}
.line span{
    vertical-align: middle;
}
.line a{
    vertical-align: middle;
    display: inline-block;
}

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

Несколько строк

<div class="line">
    <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod... </span>
</div>

Метод в данном случае известный – элемент контейнер имеет межстрочное расстояние равное высоте а вложенный элемент возвращает межстрочное на место:

.line{
    line-height: 7em;
    height: 7em;
}
.line span{
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2em;
}
.ie7 .line span{
    display: block;
    margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" :
    (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}

.ie7 .line span – костыль для IE7.

И еще один способ в котором в блок при помощи :before вставляется элемент растянутый по высоте на 100% и выровненный по центру, он создает нужную высоту строки.

.fline{
    height: 10em;
}
.fline:before {
    content: "";
    height: 100%;
    position: relative;
    width: 0px;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
}
.fline span{
    display: inline-block;    
    vertical-align: middle;
    width: 320px;
}
.fline  img{
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

Этот прием в IE7 работать не будет конечно же поскольку он не понимает псевдоселектор :before

пример

При помощи transform

.centered{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -20px; /* половина высоты элемента */
}

JS Bin

По теме

comments powered by Disqus