Алгоритм размещения макета таблицы браузером
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed.
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства table-layout</title>
<style>
table {
width: 50%; /* задаем ширину таблицы */
word-wrap: break-word; /* слово может быть прервано в произвольном месте */
}
td, th {
border: 1px solid Chocolate; /* задаем сплошную границу размером 1 пиксель цвета шоколад */
}
.test {
table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */
}
.test2 {
table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */
}
</style>
</head>
<body>
<table class = "test">
<caption>table-layout: auto;</caption>
<tr>
<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
</tr>
</table>
<table class = "test2">
<caption>table-layout: fixed;</caption>
<tr>
<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
</tr>
</table>
</body>
</html>
В данном примере мы:
К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм (auto)
Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
Кроме того мы использовали для таблиц новое для вас свойство word-wrap, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
Для второй таблицы был использован фиксированный алгоритм (fixed) размещения макета таблицы браузером
Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap, то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).
Рис. 151 Пример использования свойства table-layout.
Как задать высоту таблицы (строки)
HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.
Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.
Для примера увеличим высоту первой строки
<HTML> <HEAD> <TITLE>Телефонный справочник </TITLE> </HEAD> <BODY> <P ALIGN="CENTER"> <TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC"> <TR BGCOLOR=”#99CC33” HEIGHT="50"> <TD>№</TD> <TD>Фамилия</TD> <TD>Номер телефона</TD> </TR> <TR> <TD BGCOLOR=”#FFFF99”>1</TD> <TD>Фрося Бурлакова</TD> <TD>8-952-987-13-20</TD> </TR> <TR> <TD BGCOLOR=”#FFFF99”>2</TD> <TD>Иван Петров</TD> <TD>8-918-964-70-11</TD> </TR> <TR> <TD BGCOLOR=”#FFFF99”>3</TD> <TD>Афоня Ивлев</TD> <TD>8-961-594-12-45</TD> </TR> </TABLE> </P> </BODY> </HTML>
Результат
Дополнительные способы форматирования
Кроме указанных выше способов выполнения выравнивания по ширине в HTML существуют другие теги, при помощи которых можно расположить текст нужным образом.
Например, тег позволяет сделать отступ от левой части страницы больше. Для того чтобы понять, как это работает, скопируйте следующий пример.
Существует аналогичный способ сделать большой отступ слева с заданным значением при помощи CSS. Для этого используется следующее свойство стиля.
При использовании этого метода можно самостоятельно прописать значение, которое будет отвечать за ширину отступа. Опробуйте данный способ и поменяйте размер отступа на любой другой, чтобы понять принцип действия.
Еще один интересный тег, который может быть использован для форматирования текста, но в наше время практически полностью утратил свое значение — это .
Его задача заключается в том, чтобы отключать автоматический перенос строки, даже если эта строка по ширине превышает само окно браузера.
Ложка дёгтя
К сожалению в каждой бочке мёда обязательно присутствует ложка дёгтя, и тут этой ложкой стал, как ни странно — IE9. При чём ни IE7 и ни IE8, а именно Internet Explorer 9. В этом браузере, почему-то, выключается чувствительность высоты ячейки, и именно в двух следующих случаях:1. Если мы выставляем 100%-ую высоту любому блоку в ячейке, будь то статический или абсолютный. Он перестаёт чувствовать высоту и подстраивается под высоту самого контента в ячейке.2. При одновременном задании абсолютному блоку таких свойств, как top и bottom. В таком случае элемент так же, как и в первом варианте, чувствует высоту только лишь контента, но не ячейки в целом.
Чтобы было ясно, о чём идёт речь, предоставлю скриншот.
На рисунке отчётливо видно, что два правых абсолютных блока растягиваются только лишь на высоту контента, той ячейки, которой они принадлежат, но не на её высоту, как происходит в других браузерах.
Причём удивительно то, что, например, если задать отдельно одну из координат: top или bottom, то всё отлично, элемент с position: absolute оказывается в этих координатах в считанные секунды. Почему это происходит? Я, если честно — не понял. Но, эта неприятность, явно влияет на кроссбраузерность и заставляет искать решение, найти которое, к сожалению, мне не удалось, как я только не пытался (надеюсь кто нибудь пнёт в нужную сторону). Просто учитывайте этот момент во время вёрстки.
Метод таблиц CSS
Выше упоминалось, что свойство vertical-align применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align для вертикального центрирования содержания.
Примечание: Таблица CSS не является тем же, что и HTML таблица.
Мы устанавливаем табличный вывод для родительского элемента div , а вложенный элемент div выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.
В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div будет изменять размер в соответствии со своим содержанием.
Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.
Text-decoration, text-align, text-indent в CSS
Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался в чистом Html 4.01 по версии валидатора для выравнивания содержимого, например, абзацев P или заголовков).
Он имеет всего четыре возможных значения:
Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.
Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.
Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:
По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.
Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя размеры (пиксели, em или ex) допустимые в CSS) или с помощью процентов:
От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.
А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:
Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов, т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).
Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).
Оно может иметь всего четыре значения:
Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (тег A) (они по умолчанию подчеркиваются).
Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что. ).
Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используйте для text decoration элемента гиперссылки значение none.
Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):
Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел.
Расстояние между инлайн-блочными элементами
С этой проблемой сталкивался каждый CSS-новичок.
Самая раздражающая ситуация, когда у вас есть родительский контейнер и внутри него два элемента, между которыми вы хотите поровну поделить пространство.
Предполагается, что каждому нужно назначить ширину в 50%, однако это не работает. Непонятное расстояние между ними заставляет второй элемент сползать на следующую строчку, так как итоговая сумма размеров превышает 100% родителя.
В этом моменте начинаются истерики и появляются костыли с волшебными цифрами вроде .
Разберемся на примере: есть два элемента с одинаковой шириной и высотой, и требуется, чтобы они занимали 50/50 доступного пространства внутри своего родителя.
Добавляем стили:
и получаем вот это:
Есть 2 распространенных способа решения этой проблемы.
- использовать комментарии;
- удалить пространство между тегами в HTML-файле.
Теперь все нормально:
Примечание переводчика:Строчно-блочные элементы воспринимаются браузером как обычные слова в предложении, поэтому он разделяет их пробелом, ширина которого примерно равна 4px. Оба способа позволяют убрать этот пробел на физическом уровне.Также можно воспользоваться CSS и установить для контейнера нулевой размер шрифта. При этом пробел сохранится, но будет иметь нулевую длину. Этот способ часто используется, но подходит не для всех ситуаций.
Вертикальное выравнивание блочных элементов
Самой распространенной проблемой начинающих верстальщиков является вертикальное выравнивание блока. Особенно проблема актуальна для блочных элементов, высота которых заранее определена. В случае, когда высота блока и высота его родителя известны заранее, проблема решается очень просто — отнимаем от высоты родительского блока высоту блока, который хотим выровнять вертикально, потом делим результат пополам (с округлением) и присваиваем отступ сверху для целевого элемента, равный полученному значению.
Например, если высота экрана или родительского элемента равна 1000 пикселей, а высота блока, который мы хотим выровнять по вертикали — 500 пикселей, то произведя необходимые вычисления, мы получим следующее:
/* (1000 - 500) / 2 = 250 */ margin: 250px auto;
Более простой, но не кроссбраузерный на 100% пример:
margin: auto;
Данный пример работает кроссбраузерно только если все величины заранее известны, но к сожалению, в большинстве случаев это не так и приходится применять более изощренные способы. Например, если вам необходимо выровнять одну строку текста по вертикали, то можно задать высоту строки, равную высоте родительского элемента при помощи line-height. Также можно воспользоваться свойством vertical-align: middle;, которое будет работать только для элементов со свойством display: inline; или display: inline-block;.
Абсолютное позиционирование элемента также можно прийти на помощь, если это необходимо. Но все зависит от конкретной ситуации, поэтому мы просто приведем всевозможные способы, благодаря которым можно выровнять блок по вертикали экрана или родительского элемента.
Отступ padding или margin
Преднамеренно увеличиваем размер родительского элемента, как бы расширяя его при помощи padding или margin:
margin: 300px 0; /* или */ padding: 300px 0;
Одна строка текста и line-height
В этом примере необходимо знать высоту родительского элемента и быть уверенным в том, что текст достаточно короткий и не будет переноситься (обычно используется для вертикальных меню в сайдбаре):
/* Например, высота родительского элемента равна 300 пикселей */ line-height: 300px;
Вертикальное выравнивание иконок или смайлов в тексте
Часто оказывается так, что высота смайла или иконки, вставленной в текст не равна высоте одной строки текста, поэтому нужно либо установить line-height, равный высоте иконки или же использовать свойство vertical-align для изображений.
vertical-align: middle;
Таблица или display: table-cell
Таблица отлично подходит для вертикального выравнивания текста и более того имеет это свойство для ячеек по умолчанию (аналоговый атрибут — valign=»middle»), однако если нужно использовать блоки, то можно присвоить им свойство display: table; и display: table-cell; (что является издевательством и полным идиотизмом), тогда обычный vertical-align заработает.
<div class="table"> <div class="td"> Самый обыкновенный текст. </div> </div>
.table { display: table; } .td { display: table-cell; }
Абсолютное позиционирование position: absolute
Иногда, когда условия позволяют это сделать, можно просто позиционировать элемент абсолютно, а не относительно, тогда CSS будет выглядеть так:
position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
Помимо приведенных примеров существует масса других способов и возможностей выровнять блочные и встроенные элементы по вертикали, однако приводить мы их не стали в силу того, что они слишком громоздкие или не являются кроссбраузерными, а также требуют простановки вендорных префиксов, что не очень хорошо. Нужно просто подождать пару лет, когда все браузеры подтянутся и необходимость в префиксах пропадет, тогда мы и будем использовать новые экспериментальные свойства. А мы же просто считаем, что приведенных кроссбраузерных примеров, которые проверены временем, более чем достаточно и незачем изобретать велосипед заново.
Выравнивание текста в таблицах
Внутри таблиц действуют все теги форматирования текста и шрифтов. В качестве примера
возьмем таблицу из прошлого урока и добавим в нее теги форматирования текста.
|
<table border="3" width="400" height="200"> <tr bgcolor="#CCCCFF" align="center"> <td> <td> <td> </tr> <tr> <td bgcolor="#CCFFCC"> <td> <td bgcolor="#FFCCFF"> </tr> <tr> <td bgcolor="#FFCCFF"> <td> <td bgcolor="#CCFFCC"> </tr> <tr bgcolor="#00FFFF"> <td align="center"> <td align="center"> <td align="center"> </tr> </table> |
В окне браузера таблица будет выглядеть так:
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х3 |
| |
|
|
| 4х1 | 4х2 | 4х3 |
Как видите кроме тега <center> также можно прописать атрибут align для ячеек
<td> или для целого ряда ячеек <tr> таблицы .
Атрибут align может принимать еще значения right и left. То есть содержимое
ячейки будет выровнено по правому краю или по левому соответственно.
Значение justify при употреблении с тэгами <td>, <tr>, <table>,
атрибут align принимать не может.
Также для форматирования содержимого внутри ячеек можно при помощи тегов <p>
и <div>
Все это видно из выше изложенного примера, я задал центрирование текста внутри
таблицы разными способами, а результат получился одинаковый для всех строк и
столбцов данной таблицы.
По умолчанию таблица целиком выравнивается по левому краю, для изменения положения
таблицы в окне браузера для тега <table> прописывается атрибут align которому
можно присвоить значения: center, right и left.
|
<table border="3" width="400" height="200" align="center"> <tr bgcolor="#CCCCFF" align="center"> <td> <td> <td> </tr> <tr> <td bgcolor="#CCFFCC"> <td> <td bgcolor="#FFCCFF"> </tr> <tr> <td bgcolor="#FFCCFF"> <td> <td bgcolor="#CCFFCC"> </tr> <tr bgcolor="#00FFFF"> <td align="center"> <td align="center"> <td align="center"> </tr> </table> |
В итоге таблица будет выровнена по центру.
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х3 |
| |
|
|
| 4х1 | 4х2 | 4х3 |
Выровнять содержимое внутри таблицы можно не только по горизонтали, но и по вертикали
при помощи атрибута valign может принимать значения:
- middle — содержимое будет находится в середине.
- top — содержимое будет находится вверху ячейки.
- bottom — содержимое будет находится внизу ячейки.
Атрибут valign может прописываться для тегов <td> — для одной ячейки,
<tr> — для ряда ячеек и <table> — для таблицы в целом.
|
<table border="3" width="400" height="200" align="center"> <tr bgcolor="#CCCCFF" align="center"> <td valign="bottom"> <td valign="top"> <td valign="bottom"> </tr> <tr> <td bgcolor="#CCFFCC" valign="top"> <td> <td bgcolor="#FFCCFF" valign="top"> </tr> <tr> <td bgcolor="#FFCCFF" valign="bottom"> <td> <td bgcolor="#CCFFCC" valign="bottom"> </tr> <tr bgcolor="#00FFFF" valign="bottom"> <td align="center"> <td align="center"> <td align="center"> </tr> </table> |
В окне браузера таблица или вернее сказать содержимое таблицы будет выглядеть так:
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х3 |
| |
|
|
| 4х1 | 4х2 | 4х3 |
| Вернуться назад | Перейти к следующей странице |
|---|
Заголовок таблицы
Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top — для вывода до таблицы, и bottom — после).
Для единообразия и доступности тег заголовка размещают в самом начале — сразу после тега <table>.
Тег <caption> по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.
Зачем нужен заголовок?
- Чтобы пользователям было проще ориентироваться на странице — например, когда таблиц много.
- Тег <caption> помогает людям с ограниченными возможностями. По заголовку они получают краткое представление о содержимом таблицы и решают, полезна ли она для них и стоит ли читать её целиком.
- Этот тег влияет на оптимизацию, его любят поисковики.
Примечание. Если дизайнер не предусмотрел заголовок таблицы, то хороший разработчик придумает его, добавит в разметку и скроет через CSS. Это повысит доступность контента.
Даже скрытый заголовок всё равно доступен при навигации по странице с помощью клавиатуры. И речевой браузер для людей с ограниченными возможностями тоже понимает тег <caption> — читая текст в этом теге, он меняет интонацию, темп речи, повышает громкость голоса и тому подобное.
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
Такие стили называют встроенными (inline), или внедренными.
Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:
Пример: Приоритетность стилей
- Результат
- HTML-код
- Попробуй сам »
| Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления. |
Управление макетом таблицы
Таблица расширяется и сжимается для размещения данных, содержащихся в ней. Это поведение работает по умолчанию. По мере заполнения данных внутри таблицы они продолжают расширяться, пока есть место. Однако иногда необходимо установить фиксированную ширину таблицы или столбца, чтобы управлять макетом.
Вы можете сделать это с помощью CSS-свойства . Это свойство определяет алгоритм, который будет использоваться для размещения ячеек таблицы, строк и столбцов. Это свойство принимает одно из двух значений:
- auto — использует алгоритм автоматической раскладки таблицы. С помощью этого алгоритма ширина таблицы и ее ячеек настраиваются в соответствии с содержимым. Это значение установлено по умолчанию.
- fixed — Использует алгоритм фиксированной таблицы. При использовании этого алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины столбцов, границ и расстояния между ячейками. В плане производительности это работает быстрее
Правила в следующем примере указывают, что таблица HTML создана с использованием алгоритма фиксированной разметки и имеет фиксированную ширину 300 пикселей.
Вы можете оптимизировать производительность рендеринга таблицы, указав значение для свойства . Фиксированное значение этого свойства заставляет таблицу отображаться по одной строке за раз, предоставляя пользователям информацию быстрее, в то время как при установленном значении пользователь будет дожидаться загрузки всей таблицы, прежде чем браузер сможет посчитать размеры ячеек.
Vertical-align — вертикальное выравнивание
Дальше у нас идет вертикальное выравнивание — vertical-align. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Правда, для тегов таблицы Td и Th это означает немного другое — выравниваться по вертикали будет весь контент, который находится в этих ячейках.
Для Css правила vertical-align можно использовать следующие значения:
Строки по умолчанию выравниваются по базовой линии. Вот смотрите, я применил к этому фрагменту текста увеличение шрифта и эти два фрагмента выровнялись по базовой (нижней) линии. А вертикальное выравнивание с помощью vertical-align как раз и предназначено именно для изменения способа выравнивания строк.
Например, если я для того же увеличенного фрагмента текста пропишу vertical-align:baseline, то никаких изменений не произойдет, т.к. значение baseline используется для этого Css правила по умолчанию.
Кстати, в качестве значений для него можно использовать и числа, а надпись vertical-align:0 будет означать тоже самое, что и vertical-align:baseline, т.е. значение baseline эквивалентно нулю. Следовательно, если мы хотим указать какой-либо сдвиг в вертикальном выравнивании, то этот сдвиг будем указывать относительно базовой линии (или же нуля).
Можно написать так:
И получим сдвиг фрагмента с увеличенным шрифтом вверх на 10 пикселей относительно базовой линии. Если напишем отрицательное значение:
То получим сдвиг фрагмента вниз относительно базовой линии. Из примеров видно, что из-за сдвига увеличилась высота строки, чтобы текст помещался в ней без наезда на соседнюю строку. Сдвиг можно также задавать в Em и Ex, ну, и в процентах, которые будут считаться от высоты линии этого элемента (помните в прошлой статье мы научились ее задавать с помощью line-height).
Для вертикального выравнивания содержимого ячеек таблиц в vertical-align следует использовать значения Top и Bottom для получения, соответственно, выравнивания содержимого по верхней и нижней границе ячейки (ну, а middle в ячейке таблицы используется как значение вертикального выравнивания по умолчанию).
А для шрифтовых элементов можно использовать text-top, text-bottom, m >этому фрагменту текста значение:
Что получилось в результате? По базовой линии обычного текста выровнялась средняя линия увеличенного фрагмента, т.е. мы получили вертикальное выравнивание по средней линии. Для text-top и text-bottom будет все аналогично. Вот так text-top , а так text-bottom .
Значения Css свойства vertical-align sub и super соответствуют под- и надиндексу, которые имели место быть в чистом Html (до использования CSS свойств для визуального оформления).
Работа с отступами в таблице
В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу <table> добавить вы сможете только внешний отступ (margin):
<!DOCTYPE html>
<html>
<head>
<title>Использование внутренних отступов в таблице</title>
<style>
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
padding-bottom: 19px; /* устанавливаем внутренние отступы снизу для всех сторон */
}
</style>
</head>
<body>
<table>
<caption>Отступы в таблице</caption>
<tr>
<th>1</th><th>2</th><th>3</th><th>4</th>
</tr>
<tr>
<td>2</td><td></td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td><td></td>
</tr>
<tr>
<td>4</td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto).
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для наименования таблицы (тег <caption>) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа
Результат нашего примера:
Рис. 144 Пример использования внутренних отступов в таблице.
Итого
Обобщим решения, которые обсуждались в этой статье.
Для горизонтального центрирования:
- text-align: center – центрирует инлайн-элементы в блоке.
- margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.
Для вертикального центрирования одного блока внутри другого:
Если размер центрируемого элемента известен, а родителя – нет
Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.
Если нужно отцентрировать одну строку в блоке, высота которого известна
Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .
Высота родителя известна, а центрируемого элемента – нет.
Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .
Высота обоих элементов неизвестна.
- Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
- Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
- Решение с использованием flexbox.
Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.
Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.
Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.
Нужно учитывать такой момент, что vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для строчных элементов, для выравнивания их друг относительно друга в пределах одной строки.
Для блочных элементов свойство vertical-align не работает.
Есть два способа, как можно выйти из этой ситуации:
Для тех, кто предпочитает все смотреть в видео:
Для тех, кто любит текст, читайте ниже способ решения этой проблемы.
Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.
Способ Б. Использовать своство display:table-cell;
Все было бы хорошо, но старые браузеры не поддерживают display:table-cell, особенно IE с версии 7 и ниже.
Можно, конечно, наплевать на эти старые браузеры и выравнивать текст так. Доля браузера IE7 на моем сайте, по статистике за 1 квартал 2013 года, следующая:
Это меньше чем пол процента от всех посещений. В будущем этот процент будет еще более снижаться.
Есть некоторые хитрости, которые позволяют обойти эту проблему в IE7, но это значительное усложнение кода.
Кроме того, есть ситуации, в которых можно обойтись вообще без использования display:table-cell.
Ситуация 1. Выравнивание одной строки текста.
Рассмотрим простой пример.
Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.
Этот способ хорошо работает, когда у вас всего одна строка с текстом.
Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.
Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.
Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.
Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.
Приветствую вас на сайте Impuls-Web!
Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.
В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.
