RSS

Прокоментируй статью, хотя бы пару слов!

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

  • #1avatar

    Алексей

    20.02.2010 18:18:09

    Елена, спасибо за маленькую, НО очень важную статью, я знал что существует два вида обтекания vertical-align: [top && bottom], но что их так много удобных, слышу впервые, за что и благодарю

  • #2avatar

    Елена Лунная

    20.02.2010 18:38:48

    Рада слышать что вам пригодилось. Я хотела именно показать графически разницу и напомнить про vertical-align картинок. Список всех аргументов можно посмотреть тут
    http://www.htmlbook.ru/css/vertical-align.html правда только с одним примером.

  • #3avatar

    Елена Лунная

    21.02.2010 05:16:52

    Также хочу сказать про аналогию стиля с атрибутом valign. В данном случае свойство style="vertical-align:middle" соответствует значению valign="absmiddle"!

  • #4avatar

    selenit2 (selenit)

    26.02.2010 03:56:36

    Прошу прощения за любопытство, но... можно чуть поподробнее раскрыть тему про связь с атрибутом valign? Я почему-то всю жизнь был уверен, что этот атрибут - только для ячеек таблиц, где (в смысле, при display:table-cell) и сам vertical-align ведет себя по особому и центрирует относительно ячейки, а не строки...

  • #5avatar

    Елена Лунная

    26.02.2010 13:32:46

    Всё верно. Когда 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; - выравнивает по высоте шрифта элемента родителя.
    Значения взяты с http://www.htmlcodetutorial.com/images/_IMG_ALIGN.html, с той разницей что там они указаны для align, а не valign.

    Как-то так =)

  • #6

    http://manyak8.blogspot.com/

    23.03.2010 12:59:28

    Спасибо, интересно почитать.

    У меня вопрос - вы говорите о выравнивании для текста и картинки, а input`ы и label`ы можно таким образом выравнивать относительно друг друга?

  • #7avatar

    Елена Лунная

    23.03.2010 14:26:58

    Безусловно. Все элементы выравниваются относительно базовой линии контейнера.


Чтобы оставить комментарий нужно войти или зарегистрироваться (Регистрируйтесь за 5 секунд, без подтверждения email и т.п.).
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID
Оставить комментарий как:
Гость, с именем:
Чтобы доказать что вы не бот, ОБЯЗАТЕЛЬНО поставьте тут галочку ->
P.S. Правда сообщения от гостей всё равно будут премодерироваться.
Сообщение:
Подпишитесь на статьи через RSS

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