За последние 24 часа нас посетили 16663 программиста и 1651 робот. Сейчас ищут 1866 программистов ...

Картинки в тексте

Тема в разделе "HTML и CSS", создана пользователем Nikolai_, 21 июн 2014.

  1. Nikolai_

    Nikolai_ Активный пользователь

    С нами с:
    27 авг 2010
    Сообщения:
    133
    Симпатии:
    0
    Подскажите, как можно вставлять небольшие картинки в текст прямо в строку между словами?

    Вот пример:

    [​IMG]
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Код (PHP):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>pic in text</title>
    5. <meta charset="UTF-8">
    6. <style>
    7. p{font-size:36px;}
    8. p img{vertical-align:middle;}
    9. </style>
    10. </head>
    11. <body>
    12. <p>Lorem ipsum dolor sit <img src="flag.png" alt=""> amet, centum eum in. Advenientibus aliorum naufragium inde</p>
    13. </body>
    14. </html>
     
  3. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.115
    Симпатии:
    1.244
    Адрес:
    там-сям
    по умолчанию img будет нормально вставляться в текстовый поток, т.к. по умолчанию его свойство display: inline-block. но если где-то в стилях переопределить как display: block, картинка начнет разбивать поток. так что всё в руках версталы )))
    для элементов с display:inline-block применимо вертикальное выравнивание относительно окружающего текста.

    http://htmlbook.ru/css/display
    http://htmlbook.ru/css/vertical-align
     
  4. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    [​IMG]
     
  5. Nikolai_

    Nikolai_ Активный пользователь

    С нами с:
    27 авг 2010
    Сообщения:
    133
    Симпатии:
    0
    Спасибо, YSandro!