Для комментариев зарегистрироваться или войти
Либо используйте ваш Open_ID, например аккаунт гугл, яндекс или ЖЖ
 

20 февраля 2010 :Вертикальное выравнивание

Сегодня, в преддверии грядущей статьи, я хочу кратко рассказать о свойстве vertical-align в CSS, которое применяется для вертикального выравнивания. Предварительно рекомендую прочитать про базовую линию шрифта в википедии.

Итак, сначала рассмотрим строку текста, и как называются различные вертикальные позиции на ней.

На самом деле позиций которых может иметь своство vertical-align гораздо больше. Можно даже задать точное значения в пикселях или процентах. Главное что нужно помнить, это то что для всех inline-элементов в строке одна базовая линия (baseline).

Пример: сыр.

Также нужно помнить, что базовая линия является значением по-умолчанию для всех inline-элементов, включая элемент img. Поэтому если вы верстаете таблицу в стандартном режиме и в её ячейке вы поставите только картинку, то останется зазор между границей ячейки и границей картинки снизу, избавиться от него можно задав стиль картинки vertical-align:bottom, или стиль ячейки font-size:0px.

Напоследок давайте посмотрим как будет вести себя маленькая пиктограммка в вашем тексте с различным значением выравнивания:

Это можно также увидеть в html-примере.


я буду очень признательна если вы прокоментируете эту статью

Комментарии:


Чтобы оставить комментарий нужно зарегистрироваться или войти.
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID
Оставить комментарий как:
Гость:
Сообщение:
Подпишитесь на статьи через RSS

15 самых популярных статей: