Align средствами css и атрибутами html

Извиняюсь, за долгое отсутствие статеек, то праздники, то работа...

В общем сегодня я быстренько распишу подробнее свой комментарий на статью о вертикальном выравнивании. А именно как заменить атрибуты 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.