Простой способ разместить текст внутри изображения

Question

Простой способ разместить текст внутри изображения

0

У меня есть следующий "ключ", который представляет собой div, содержащий фотографии планет и их имена для образовательной анимации. Есть ли быстрый способ/ярлык (без обертывания текста в отдельные промежутки или что-то, а затем назначение свойств top/bottom/left/right для определенных идентификаторов), чтобы текст отображался в строке с значками?

<p id='key'>
<img class='img-key' src='media/mercury.ico'> Mercury
    <br/>
<img class='img-key' src='media/venus.ico'> Venus
    <br/>
<img class='img-key' src='media/planet-earth.ico'> Earth
    <br/>

Kyle Maclean 16 янв. 2014, в 18:39

Источник

0

img {display: inline-block;}
Cthulhu 16 янв. 2014, в 17:32
0

Поставьте здесь свои CSS для #key и .img-key
Paramasivan 16 янв. 2014, в 17:43

Теги:

html

css

1 ответ

Ещё вопросы

Поставьте здесь свои CSS для #key и .img-key

j08691 · Answer 1 · 2014-01-16T15-15-00.000Z

Не уверен, что я понимаю, но вот два возможных решения. Если вы хотите все на одной строке, удалите теги <br/>.

Пример jsFiddle

Если вы хотите, чтобы текст был центрирован по вертикали с каждым изображением, установите для параметра vertical-align свойство middle на изображениях:

img {
    vertical-align:middle;
}

Пример jsFiddle

теги разрыва должны иметь каждый значок и соответствующую метку на отдельной строке