Центрирование div по горизонтали и вертикали. CSS вертикальное выравнивание для всех

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

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством "padding ".

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

.example-wrapper1 { background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; } Выравнивание абсолютно позиционированных блоков

Если для блока задано "position: absolute ", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top ","right ","bottom ","left ") внутреннего блока присвоить одинаковое значение, а также "margin: auto".

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

.example-wrapper2 { position : relative ; height : 250px ; background : url(space.jpg) ; } .cat-king { width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ; } Горизонтальное выравнивание Выравнивание посредством "text-align: center"

Для выравнивания текста в блоке есть специальное свойство "text-align ". При установленном значении "center " каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

.example-text { text-align : center ; padding : 10px ; background : #FF90B8 ; }

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов ("display: inline").

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

.example-wrapper3 { text-align : center ; background : #FF90B8 ; } .inline-text { display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; } Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto " (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper { height : 200px ; background : #F1BF88 ; } .lama1 { height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; }

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

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

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

Выравнивание свойством line-height

В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height " и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах.

.example-wrapper4 { line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; }

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle".

.example-wrapper5 { line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; } .example-wrapper5 .text1 { display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; }

У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

Выравнивание по вертикали в таблицах

Свойство "vertical-align " также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell ".

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

.one_product .img_wrapper { display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; } .one_product img { max-height : 169px ; max-width : 100% ; min-width : 140px ; display : block ; margin : 0 auto ; }

Следует помнить, что если у элемента установлено "float" отличное от "none", то он в любом случае будет блочным (display: block) - тогда придется использовать дополнительный блок-обертку.

Выравнивание дополнительным inline-элементом

И для inline-элементов можно применить "vertical-align: middle ". При этом все элементы с "display: inline ", которые находятся в одной строке, выровняются относительно общей центральной линии.

Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы:before или:after.

.example-wrapper6 { height : 300px ; text-align : center ; background : #70DAF1 ; } .pudge { display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : #fff ; width : 200px ; height : 200px ; } .riki { display : inline-block ; height : 100% ; vertical-align : middle ; } Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять "display: flex". Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать "margin: auto" для центрирования контента внутри.

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

.example-wrapper7 { display : flex ; height : 300px ; background : #AEB96A ; } .example-wrapper7 img { margin : auto ; }

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

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

Горизонтальное выравнивание margin: auto

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

Elem { margin-left: auto; margin-right: auto; width: 50%; }

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

text-align: center

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

Выравнивание с помощью text-align .wrapper { text-align: center; }

Я выровнен по центру

position и отрицательный margin влево

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:

Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }

Я выровнен по центру

display: inline-block + text-align: center

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

Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }

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

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

line-height .wrapper { height: 100px; line-height: 100px; }

Я выровнен по вертикали

position и отрицательный margin вверх

Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }

Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :

Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }

Я выровнен по вертикали

Динамическое выравнивание элемента на странице

Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.

Подключим jQuery на страницу:

Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter() . В качестве аргумента функции выступает сам элемент:

Function alignCenter(elem) { // код здесь }

В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:

Function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" // не забывайте добавить элементу position: absolute для срабатывания координат }) }

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

Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:

$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" }) } })

Применение Flexbox

Постепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента.wrapper и центрируем контент внутри:

Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ } Lorem ipsum dolor sit amet

Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

Ресурсы по теме Помощь проекту

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

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

Часто в декоративных целях требуется задать тексту выравнивание по центру, CSS в этом случае позволяет сократить время верстки. Раньше это делалось с помощью HTML-атрибутов, теперь же стандарт требует выравнивать текст с помощью таблиц стилей. В отличие от блоков, для которых нужно изменять внешние отступы, в CSS выравнивание текста по центру производится с помощью одной строки:

text-align:center;

Это свойство наследуется и передается от родителя всем потомкам. Влияет не только на текст, но и на другие элементы. Для этого они должны быть строчными (например, span) или строчно-блочными (любые блоки, которым задано свойство display: block). Последний вариант позволяет также изменять ширину и высоту элемента, более гибко настраивать отступы.

Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.

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

Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):

margin:0 auto;

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

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

Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой - с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:

.left {float:left;}
.right{float:right}

Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:

.left {float:left;}
.right{float:right}
footer {clear:both}

Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.

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

Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:

выравнивание по верхней границе — .child{vertical-align:top};
выравнивание по центру — .child{vertical-align:middle};
выравнивание по нижней границе — .child{vertical-align:bottom};

На блочные элементы ни text-align, ни vertical-align не действуют.

Возможные проблемы с выровненными блоками

Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и.third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит.second и.third. CSS-код:

.second{float:left}
.third{float:right}
.clearfix{height:0; clear: both;}

Часто используются псевдокласс:after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри.first и содержит.left и.right):

.left{float:left}
.right{float:right}
.container:after{content:""; display:table; clear:both;}

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

Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.

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

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

Начнем с общего описания задачи.

Задача вертикального центрирования

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

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

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

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

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

Метод line-height

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

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

HTML:

Нужный текст

CSS:

#child { line-height: 200px; }

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Центрирование изображения с помощью line-height

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

HTML:

CSS:

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

Значение свойства line-height должно быть больше высоты изображения.

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

HTML:

Содержание

CSS:

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

Мы устанавливаем табличный вывод для родительского элемента div , а вложенный элемент div выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.

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

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

Абсолютное позиционирование и отрицательные поля

Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

Абсолютное позиционирование и растягивание

В коде примера выполняется центрирование по вертикали и горизонтали.

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Равные отступы сверху и снизу

В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.

HTML:

Содержание

CSS:

#parent { padding: 5% 0; } #child { padding: 10% 0; }

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

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

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

Плавающий div

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

HTML:

Содержание

CSS:

#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

Заключение

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

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

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

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

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

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

Выравнивание TABLE { width: 100%; /* Ширина таблицы */ height: 100%; /* Высота таблицы */ }

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

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

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

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

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

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

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

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

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

Выравнивание

Колонка 1

Колонка 2

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

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

Выравнивание TABLE { width: 100%; /* Ширина таблицы */ } #col1 { width: 75%; /* Ширина первой колонки */ background: #f0f0f0; /* Цвет фона первой колонки */ } #col2 { width: 25%; /* Ширина второй колонки */ background: #fc5; /* Цвет фона второй колонки */ text-align: right; /* Выравнивание по правому краю */ } #col1, #col2 { vertical-align: top; /* Выравнивание по верхнему краю */ padding: 5px; /* Поля вокруг содержимого ячеек */ }

Колонка 1

Колонка 2

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

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

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

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

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

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

Выравнивание

(18.6)

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

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

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

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

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

Выравнивание

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

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