]]>
]]>
Рейтинг@Mail.ru

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

Материал из Веб программирование.

Перейти к: навигация, поиск

Содержание

Постановка задачи

Иногда при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Обычно этот вопрос решается использованием таблицы, в ячейку которой помещается текст, и для ячейки этой указывается необходимое значение CSS-свойства vertical-align. Но хороший тон верстальщика использовать блочную верстку.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент на основе блочной верстки:

<style type="text/css">
div {
    border: 1px solid #000;
    height: 10em;
    width: 10em;
}
</style>
<div>
  <span>Some text</span>
</div>


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

Решение задачи

«Правильные» браузеры (включая MSIE 8)

Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

div {
    display: table-cell;
    vertical-align: middle;
}

или

div {
    display: table-cell;
    vertical-align: bottom;
}

Internet Explorer (до 7-й версии включительно)

Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

div {
    position: relative;
}
div span {
    display: block;
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
}

Этот набор правил работает и в «правильных» браузерах.


Указывать свойства

div span {
    display: block;
    width: 100%;
}

не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center;.

Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:

<div>
  <span><span>Some text</span></span>
</div>

Тогда искомый набор правил будет иметь следующий вид:

div {
    position: relative;
}
div span {
    display: block;
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
}
div span span {
    position: relative;
    top: -50%;
}

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

Существует другой способ решения этой задачи для MSIE — использование expression. Недостаток этого подхода — выравнивание не будет работать при отключенном JavaScript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).

Рабочий пример под все браузеры с хаком для IE 6 & 7

Выравнивание текста по горизонтали под все браузеры. HTML и CSS:

<div>
  <span><span>Some text</span></span>
</div>
<style type="text/css">
div{
  position: relative; 
  display:table; 
}
div span {
  display:table-cell; 
  vertical-align:middle;
  /*hack for IE 6&7*/
  //display: block;
  //position: absolute;
  //top: 50%;
  //left: 0%;
  //width: 100%;  
}
div span span{
  display:block;
  /*hack for IE 6&7*/  
  //position: relative;
  //top: -50%;  
} 
</style>
]]>
Google+
]]>
Личные инструменты
Хочешь еще цитату? Основная проблема с программистами заключается в том, что вы никогда не можете сказать, чем они занимаются, до тех пор, пока не будет слишком поздно.Сеймур Крей
веб-программирование
Просмотры
чтим

Deprecated: Function set_magic_quotes_runtime() is deprecated in /var/www/webproger/data/www/webproger.ru/1c6a72389c0fd92079ac7ae7cd356173/sape.php on line 218 Deprecated: Function set_magic_quotes_runtime() is deprecated in /var/www/webproger/data/www/webproger.ru/1c6a72389c0fd92079ac7ae7cd356173/sape.php on line 224

]]>
Rambler's Top100
]]>
]]>
]]>