Заметки сисадмина о интересных вещах из мира IT, инструкции и рецензии. Настраиваем Компьютеры/Сервера/1С/SIP-телефонию в Москве

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

2014-02-19 · Posted in 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 задан ячейке таблицы – это задаёт расположение базовой линии текста относительно ячейки.

Аналогично с inline элементами. Поиск в гугле показал что:

Правильно кстати писать не 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.

Leave a Reply