Компьютер

ЧП Куликов Михаил Михайлович

Тел:

+380-(50)-589-55-02

Loading
Мы в социальных сетях...

    -  Вконтакте
    -  Facebook
    -  Google+
    -  Twitter
    -  LiveJournal
    -  Я.ру
    -  Одноклассники
    -  RSS
    -  Мой Круг
    -  YouTube
Прочее...

/images/certificate_small.png

Анализ: траст сайта it-kmm.com
Внимание!!! Заработал на 100% новый сервис.

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

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..



Комментарии к посту «Align средствами css и атрибутами html»

Комментариев пока нет, будьте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

DT

Курсы валют:

UAH

1 USD = 24.510 24.272
1 EUR = 26.525 26.178
1 RUR = 00.385 00.350

Антивирусы в формате SaaS
Подписаться письмом

Спонсоры...

SP:   LF:   PP:  

ubuntu == © Куликов М.М. (2011)
Сертифицированный партнер Dr.Web Free secondary DNS uaRating Rambler's Top100 Рейтинг@Mail.ru bigmir)net TOP 100 Яндекс цитирования Ranker Рейтинг сайта в веб-каталоге misto.zp.ua TOP.zp.ua