Some text here

Плюсы

• Контент может динамически изменять высоту (высота не определена в CSS).
• Контент не обрезается в случае, если для него недостаточно места.

Минусы

• Не работает в IE 7 и меньше
• Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div -а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div -а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Плюсы

• Работает во всех броузерах.
• Нет лишней вложенности.

Минусы

• Когда не достаточно места, контент пропадает (например, div находится внутри body , а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div -ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

Плюсы

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

Минусы

• Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div -а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0; , но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Плюсы

• Очень просто.

Минусы

• Не работает в Internet Explorer
• Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Плюсы

• Работает во всех броузерах.
• Не обрезает текст, если он не влез.

Минусы

• Работает только с текстом (не работает с блочными элементами).
• Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

• #floater (чтобы выровнять контент по центру)
• #centred (центральный элемент)
  • #side
    • #logo
    • #nav (список
    • #content
  • #bottom (для копирайтов и всего такого)

  Напишем следующую html-разметку:

  A Company

  • Home
  • Products
  • Blog
  • Contact
  • About

  Page Title

  Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.

  Heading 2

  Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services.

  Copyright notice goes here

  Шаг 2

  Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css . Именно на него прописана ссылка в html-файле.

  Html, body { margin: 0; padding: 0; height: 100%; } body { background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; } #floater { position: relative; float: left; height: 50%; margin-bottom: -200px; width: 1px; } #centered { position: relative; clear: left; height: 400px; width: 80%; max-width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; } #bottom { position: absolute; bottom: 0; right: 0; } #nav { position: absolute; left: 0; top: 0; bottom: 0; right: 70%; padding: 20px; margin: 10px; } #content { position: absolute; left: 30%; right: 0; top: 0; bottom: 0; overflow: auto; height: 340px; padding: 20px; margin: 10px; }

  Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

  Нижний отступ для элемента "floater"-а равен минус половине высоты контента (400px), а именно -200px ;

  Сейчас ваша страничка должна выглядеть приблизительно так:

  

  Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

  Поскольку элементу #centered установлено position:relative , мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content , чтобы появлялись скроллбары, в случае если не будет помещаться контент.

  Шаг 3

  И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

  #nav ul { list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; } #nav li { padding: 0; margin: 3px; } #nav li a { display: block; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; } #nav li a::after { content: "»"; color: #aaa; font-weight: bold; display: inline; float: right; margin: 0 2px 0 5px; } #nav li a:hover, #nav li a:focus { background: #f8f8f8; border-bottom-color: #777; } #nav li a:hover::after { margin: 0 0 0 7px; color: #f93; } #nav li a:active { padding: 8px 7px 6px 7px; }

  Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none , а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

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

  Другая интересная вещь, которую мы использовали для меню - это псевдо-классы:before и:after . Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

  

  Шаг 4

  Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.

  #centered { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666; } h1 { color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; } #bottom { padding: 10px; font-size: 0.7em; color: #f03; } #logo { font-size: 2em; text-align: center; color: #999; } #logo strong { font-weight: normal; } #logo span { display: block; font-size: 4em; line-height: 0.7em; color: #666; } p, h2, h3 { line-height: 1.6em; } a { color: #f03; }

  В этих стилях мы устанавливаем закруглённые углы для элемента #centered . В CSS3, за это будет отвечать свойство border-radius . Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

  

  Совместимость

  Как вы уже наверное предположили, основной источник проблем совместимости - Internet Explorer:

  • Элементу #floater обязательно надо установить ширину
  • В IE 6 лишние отступы вокруг меню

  Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.

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

  
  Сравним следующие подходы. Выравнивание с помощью:

  • таблицы,
  • отступов,
  • line-height ,
  • растягивания,
  • отрицательного margin ,
  • transform ,
  • псевдоэлемента,
  • flexbox .
  В качестве иллюстрации рассмотрим следующий пример.

  

  Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

  
  Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

  Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

  Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

  Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

  Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
  После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
  http://jsfiddle.net/c1bgfffq/

  Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

  Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

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

  Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
  
  http://jsfiddle.net/c1bgfffq/1/

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

  Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

  
  .outer-wrapper { display: table; } .outer { display: table-cell; }
  Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

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

  Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

  Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
  http://jsfiddle.net/c1bgfffq/6/

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

  Выравнивание с помощью line-height

  Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

  Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
  http://jsfiddle.net/c1bgfffq/12/

  Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

  Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
  http://jsfiddle.net/c1bgfffq/15/

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

  Выравнивание с помощью "растягивания"

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

  Для этого нужно:

  1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
  2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
  3. установить значение auto для вертикальных отступов внутреннего блока.
  .outer { position: relative; } .inner { height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
  http://jsfiddle.net/c1bgfffq/4/

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

  Выравнивание с помощью отрицательного margin-top

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

  Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

  Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
  http://jsfiddle.net/c1bgfffq/13/

  Минус данного способа - должна быть известна высота внутреннего блока.

  Выравнивание с помощью transform

  Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

  Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
  http://jsfiddle.net/c1bgfffq/9/

  Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

  Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

  Выравнивание с помощью Flexbox

  Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

  Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

  Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
  http://jsfiddle.net/c1bgfffq/14/

  Минус данного способа − Flexbox поддерживается только современными браузерами.

  Какой способ выбрать?

  Нужно исходить из постановки задачи:
  • Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
  • Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
  • Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
  • Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

  Теги: Добавить метки

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

  Скорее всего вы уже знаете о существовании замечательного свойства CSS vertical-align. И сам Бог велел нам пользоваться для вертикального выравнивания именно этим свойством (не зря же оно носит такое, говорящее само за себя, название).

  Постановка задачи: Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.

  Теперь приступим к решению поставленной задачи.

  И так, у нас есть блок, высота его может меняться:

  Содержимое блока

  Первое, что приходит в голову – это сделать следующий финт:

  Содержимое блока

  Есть все основания предполагать, что фраза Содержимое блока выровняется по центру высоты div-контейнера.

  Но не тут-то было! Никакого ожидаемого выравнивания по центру таким образом мы не добьемся. А почему? Казалось бы все указано правильно. Оказывается вот в чем загвоздка: свойство vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для выравнивания строчных элементов друг относительно друга.

  По поводу выравнивания внутри ячейки таблицы, я думаю, все понятно. А вот другой случай со строчными элементами я поясню.

  Вертикальное выравнивание строчных элементов

  Предположим есть у вас строка текст, которая разбита строчными тегами на части:

  Вас приветствует кусок текста!

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

  Действие же блочного тега приводит к переносу содержимого контейнера на новую строку.

  – это блочный тег. Если мы заключим куски текста в блоки

  , то каждый из них окажется на новой строке. Используя тег , который, в отличие от

  , является строчным, переноса контейнеров на новую строку не будет, все контейнеры останутся в одной строке.

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

  Для контейнеров применим следующие свойства CSS:

  #perviy{ vertical-align:sub; } #vtoroy{ vertical-align:3px; } #tretiy{ vertical-align:-3px; }

  В результате строка текста будет иметь вот такой вид:

  Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.

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

  Выравнивание по вертикали в div-контейнере

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

  Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

  Ха, оказывается очень просто.

  CSS-свойство display позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:

  Пусть у нас есть div класса textalign:

  Содержимое блока

  Для данного блока указываем следующее CSS-свойство:

  Textalign{ display: table-cell; }

  Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.

  Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.

  Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:

  • Способ с применением дополнительного вспомогательного div-котнейнера
  • Способ с использованием expression-а . Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
  • Использование свойства line-height . Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
  • Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.

  Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.

  Условный комментарий

  Конструкция вида:

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

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

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

  Таким образом, используя условный комментарий, мы сможем спрятать кусок кода от всех браузеров кроме IE.

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

  Из-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:

  Это какой-то проверочный текст.
  Он состоит из двух строк.

  Для div-контейнера класса textalign задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):

  Display: table-cell; vertical-align: middle;

  И еще два свойства, которые задают ширину и высоту для блока:

  Width:500px; height: 500px;

  Этого вполне достаточно для выравнивания содержимого контейнера по центру относительно вертикали, во всех браузерах кроме IE .

  Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE (именно для них мы использовали дополнительные блоки div и span ):

  Обращаемся к тегу div внутри блока класса textalign . Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.

  Textalign div{ position: absolute; top: 50%; }

  Такая конструкция означает: для всех тегов div внутри блока с классом textalign применить перечисленные свойства.

  Соответственно, стили заданные для блока textalign видоизменяются:

  Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; }

  Теперь левая верхняя точка текстового блока смещена вниз на 50%.

  Для пояснения происходящего я нарисовал иллюстрацию:

  

  Как видно из картинки, определенного прогресса мы добились. Но это еще не все! Верхняя левая точка желтого блока действительно сместилась на 50% вниз, относительно родительского (фиолетового) блока. Но нам-то нужно, чтобы на пятидесяти процентах высоты фиолетового блока находился центр желтого блока , а не его верхняя левая точка.

  Теперь в ход пойдет тег span и его относительное позиционирование:

  Textalign span{ position: relative; top: -50%; }

  Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!

  Немного подшаманим

  Перво-на-перво нам нужно спрятать петрушку от всех нормальных браузеров и открыть ее для IE. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:

  Есть небольшая проблемка. Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.

  Решение проблемы: нужно добавить свойство overflow: hidden блоку textalign.

  Детально познакомиться со свойством overflow можно в .

  Окончательный вид CSS-инструкций для блока textalign имеет вид:

  Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px solid black; }

  Прошу пардону, забыл упомянуть один важный момент. Если вы будите пытаться задавать высоту блока класса textalign в процентном соотношении , то у вас ничего не выйдет .

  Центровка в блоке переменной высоты

  Очень часто встречается необходимость задать высоту блока класса textalign не в пикселах, а в процентах от высоты родительского блока, и выровнять содержимое div-контейнера по середине.

  Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign превращается именно в ячейку таблицы, благодаря свойству display:table-cell ).

  В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table и уже для него задавать процентное значение высоты. Тогда вложенный в него блок, с CSS-директивой display:table-cell , благополучно унаследует высоту родительского блока.

  Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:

  Классу textalign мы изменим значение свойства display с table-cell на table и убирем директиву выравнивания vertical-align: middle . Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.

  Таким образом, CSS-свойства для блока класса textalign будут иметь следующий вид:

  Textalign{ display: table; width:500px; height: 100%; position: relative; overflow: hidden; border: 1px solid black; }

  Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign (это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell , тогда он унаследует высоту в 100% от родительского блока textalign (фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle .

  Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign .

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

  Вот и вся хитрость. При желании, вы можете переменной высоты с отцентрованным содержимым.

  Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить .

  Влад Мержевич

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

  Центрирование по вертикали

  Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

  Пример 1. Центрирование рисунка

  В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега , а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

  Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

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

  Выравнивание по горизонтали

  За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

  Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

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

  Для указания выравнивания содержимого ячеек по верхнему краю, для тега требуется установить атрибут valign со значением top (пример 2).

  Пример 2. Использование valign

  Колонка 1

  Колонка 2

  В данном примере характеристики ячеек управляются с помощью параметров тега , но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

  Пример 3. Применение стилей для выравнивания

  Колонка 1

  Колонка 2

  Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

  Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

  Выравнивание по центру

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

  

  В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

  Пример 4. Выравнивание формулы

  (18.6)

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

  Выравнивание элементов формы

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

  

  Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

  Пример 5. Выравнивание полей формы

  Имя
  E-mail
  Комментарий

  В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .