Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
6 г. назад

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

Очень часто при верстки приходится заниматься выравнивание объектов, один относительно другого. Чаще всего такая проблема присутствует для вертикального выравнивания, с горизонтальным более или менее все понятно. Есть несколько решений для выравнивания. Расмотрим пример.

<div class="inner">
    текст который должен быть выравнен по вертикале
</div>

Решение № 1 с ипользованием высоты строки line-height

div.inner { 
  border:1px solid red; 
  height:75px; 
  line-height:75px
}

Такое решение хорошо, когда блок по ширине больше чем содержимое. Такое решение вертикального выравнивания можно использовать для меню.

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

Если у нас блок будет уже, чем содержимое, то получится следующее

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

 Чтобы исправить эту проблему, есть два решения.

Решение №2 с использование табличного поведения ячеек (display:table)

Меняем код структуры, добавляем всего один блок

<div class="inner">
    <div>текст который должен быть выравнен по вертикале</div>
</div>

И теперь задаем display для обоих блоков. Для внешнего блока задаем display:table, для внутреннего задаем display:table-cell. Это необходимо с точки стандартов верстки. Ячейка без таблицы не может существовать

.inner { 
   border:1px solid red;
   height:75px;
   width:200px;
   display:table
}
.inner div {
   display:table-cell; 
   vertical-align:middle
}

Используя правило vertical-align:middle, современные браузеры выравнивают текст внутри ячейки по вертикали.

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

Но есть такие бразуеры, как Internet Explorer  6 и 7 версии, они не понимают такого поведения. Соответственно с ними надо бороться соответствующим методом:

.inner div {
   margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px")
} 

Это только два способа. Расcмотрим еще несколько методов выравнивания.

Решение №3 с абсолютно позиционирования

Оставляем туже двух блочную структуру. В этом решении мы обманываем браузеры, говоря что внутри блока лежит строчный элемент, а не блок. Вот такой CSS:

.inner { 
   position: relative; 
   height: 200px; 
   width:200px; 
   border:1px solid red
}
.inner div {
   position: absolute;
   top: 50%;
   height: 50px;
   margin-top: -25px
}

Поведение объясняет очень просто. Из блока который фиксированные размеры имеет вырезается блок, у которого не известны размеры. Все браузеры автоматически высчитывают его высоту. Соответственно мы сможем абсолютно спозиционировать блок внтури внешнего блока. Этот метод кстати подходит весьма успешно для многих задач по центрированию блоков. Например, для центрирования изображения с неизвестными размерами в блоке с известными размерами или, например, горизонтальное выравнивание меню сделанного на структуре UL-LI.

Источники:

  1. http://css-html.org/17-vertical-align-in-divs/
  2. http://haslayout.net/css-tuts/Vertical-Centering
  3. http://habrahabr.ru/blogs/css/71236/
  4. http://blog.sribna.com/vertikalnoe-vyiravnivanie-v-css-chast-2.htm

 

Комментарии

#Алла01.12.2009 16:34
Спасибо большое, пригодилось)) Работает)) Ответить
#Багира15.01.2010 04:20
Огромное спасибо!!! а то я уже головой биться начала от безысходности... Ответить

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

Наверх