Align средствами css и атрибутами html
Сперва, должна сказать, что эффект как атрибута, так и стилей, у блочных и строчных элементов отличается. В частности если задать выравнивание блочному элементу, то это повлияет на расположение дочерних элементов в нём, а если задать строчному, то вертикальное выравнивание повлияет на расположение его самого, а горизонтальное вообще ни на что не повлияет.
Для блочных элементов атрибут 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 задан ячейке таблицы – это задаёт расположение базовой линии текста относительно ячейки.
|
1 |
<td valign="top"> и <td style="vertical-align:top"> - одно и то же. |
Аналогично с inline элементами. Поиск в гугле показал что:
|
1 |
<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.