Извиняюсь, за долгое отсутствие статеек, то праздники, то работа...
В общем сегодня я быстренько распишу подробнее свой комментарий на статью о вертикальном выравнивании. А именно как заменить атрибуты align и valign у html, средствами css.
Введение
Сперва, должна сказать, что эффект как атрибута, так и стилей, у блочных и строчных элементов отличается. В частности если задать выравнивание блочному элементу, то это повлияет на расположение дочерних элементов в нём, а если задать строчному, то вертикальное выравнивание повлияет на расположение его самого, а горизонтальное вообще ни на что не повлияет.
Для блочных элементов атрибут align - аналогичен стилю text-align, для строчных - атрибуту float. Атрибут valign (который можно писать как align, при отсутствии оного), заменяет свойство vertical-align, только с немного другими значениями, смотрите ниже таблицу соответствий.
Горизонтальное выравнивание
Раньше, например для того чтобы центрировать какой-то элемент, использовани элемент <center>
, потом такой простой и понятный элемент запретили, в пользу <div align="center">
, потом запретили и атрибут align, в пользу css свойств text-align, float и margin.
Важно помнить:
text-align - в правильных браузерах не влияет на дочерние блоковые элементы!
Т.е <div align="right"> и <div style="text-align:right"> не одно и тоже. Свойство text-align
не окажет влияния на дочернюю таблицу или div, тогда как align="right" - расположит все дочерние элементы справа, даже блочные.
Таблица перевода атрибутов в CSS:
<div align="center"><b>/*Строчный элемент*/ | <div style="text-align:center"><b> |
<div align="center"><table> /*блочный элемент*/ | <table style="margin: 0 auto;"> |
<img align="right">/*inline-block элемент*/ | <img style="float: right;"> |
Вертикальное выравнивание
Читайте также соответствующую статью про вертикальное выравнивание.
Когда vertical-align задан ячейке таблицы - это задаёт расположение базовой линии текста относительно ячейки.
<td valign="top"> и <td style="vertical-align:top"> - одно и то же.
Аналогично с inline элементами. Поиск в гугле показал что:
<img valign="absmiddle"> означает <img style="vertical-align:middle">
Правильно кстати писать не valign, а align, однако любимый эксплорер в каких-то версиях понимает для align только центровку по горизонтали. Возможно это сделано для того чтобы была возможность задавать отдельно align (css text-align
) и отдельно valign (css vertical-align
)
Интересно знать такую таблицу соответствий , например применительно к <img>
(указываю атрибут align, но подразумеваю valign):
align="bottom" | vertical-align:baseline; | значение по умолчанию, выравнивает базовые линии текста и картинки |
align="baseline" | vertical-align:baseline; | то же самое |
align="absbottom" | vertical-align:bottom; | выравнивает базовую линию картинки по низу текста |
align="absmiddle" | vertical-align:middle; | выравнивает середину текста с серединой картинки |
align="MIDDLE" | не имеет аналога | выравнивает нижнюю границу текста с серединой картинки |
align="top" | vertical-align:top; | выравнивает по высоте самого высокого текста |
align="texttop" | vertical-align:text-top; | выравнивает по высоте шрифта элемента родителя. |
P.S. Не забывайте, что элемент <p> - является блочным, т.е. для форматирования текста в нём достаточно применять style text-align
.
Комментарии:
Роман
01.04.2013 23:53:52
Aen
08.04.2013 19:02:07
Mister DMS
22.07.2013 00:54:18
Алексей
14.03.2014 11:26:52
гн. Неизвестный
25.03.2014 10:31:32
Илья
01.05.2014 12:06:07
Владимир
05.05.2015 18:58:11