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

Часто бывает, что требуется выравнять текст по нижнему краю или по середине блока. Вроде бы все просто: указать для DIV display:table-cell и vertical-align:middle (или bottom), но IE не понимает значения table-cell для свойства display. Придется выкручиваться...

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

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

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

HTML:

<div>
   <span>Текст</span>
</div>

СSS:

div {
   height:400px;
   width:300px;
   position: relative;
}
div span {
   position: absolute;
   bottom: 0%;
}

Этот способ отлично сработает во всех браузерах и никаких хаков или условных коментариев не требует.

Выравнивание по середине блока

В данном случае нам потребуется еще один SPAN. Первый SPAN поместит текст относительно середины, а второй приподнимет текст на половину своей высоты.

HTML:

<div>
   <span><span>Текст</span></span>
</div>

СSS:

div {
   position: relative;
   height:400px;
   width:300px;
}
div span {
    position: absolute;
    top: 50%;
}
div span span {
   position: relative;
   top: -50%;
}

Но это сработает только в Internet Explorer, так как он по-особенному обрабатывает свойство top. Для кроссбраузерности нашего кода придется прибегнуть к условным коментариям для IE, а для остальных браузеров использовать display:table-cell и vertical-align:middle. Вот полный код для всех браузеров:

HTML и CSS:

<style type="text/css">
div {
   display: table-cell;
   vertical-align: middle;
   height:400px;
   width:300px;
   background-color:#cccccc;
}
div span {
   position: relative;
}
</style>
<!––[if IE]>
<style type="text/css">
div {
   position: relative;
}
div span {
   position: absolute;
   top: 50%;
}
div span span {
   position: relative;
   top: -50%;
}
</style>
<![endif]––>
<div>
   <span><span>Текст</span></span>
</div>

Кстати, если Вам потребуется выравнять текст еще и по горизонтали, добавьте к описанию стиля для тега SPAN следующее:

display: block;
left: 0%;
width: 100%;

Теперь Вы можете выравнивать текст и по горизонтали с помощью свойства text-align для тег SPAN.