it-swarm.com.ru

Как вертикально выровнять пролеты с текстом и изображением

Я искал часы (очевидно, не в нужном месте!)

Пожалуйста, рассмотрите этот пример: http://jsfiddle.net/DYLs4/9/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <span id="icon"></span>
</div>

cSS:

#text24{
    font-size:24px; color:#999;   
}
#text12{
    font-size:12px; color:#000;  
}
#icon{
    height:36px; width:36px;
    display:inline-block;
    background:url(some-icon.png);
}​

 Result

То, что я пытаюсь достичь, это:

  • Центрировать вертикально текст24 (относительно изображения)
  • Совместите нижнюю часть текста12 с нижней частью текста24
  • Убедитесь, что все работает в IE6 -> Chrome

Goal

Большое спасибо за вашу помощь!

7
Johann

Добавьте vertical-align: middle к своему изображению.

РЕДАКТИРОВАТЬ

Согласно комментариям, это решение также требует display: inline-block;.

19
slash197
2
cgvector

Я знаю, что большинство дизайнеров ненавидят использовать таблицы для разметки, но в любом случае позвольте мне попробовать. Вы можете использовать valign таблицы.

0
Dewfy

Конечный результат

http://jsfiddle.net/rizwanabbasi/frsA5/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/>
</div>

#wrapper{
    position:absolute; left:0;
}
#text24{
    font-size:24px; color:#999; font-weight:bold;
}
#text12{
    font-size:12px; color:#000; font-weight:bold; }
#icon{
    height:36px; width:36px;
    display:inline;
    vertical-align:middle;
    }
0
cgvector