У меня есть такой макет:
В нем синий блок, в этом блоке расположена картинка (оранжевая) и текст. Нужно чтобы текст располагался именно так. На таблицах это легко сделать, а вот как сделать на div'ах?
Код и стиль у меня такой:
<div id="menu">
<div id="header_button">
<img src="img.gif" alt="" />
<span>Тут надпись в 2 или 3 строчки</span>
</div>
</div>
#header_button
{
float: right;
width: 170px;
height: 27px;
line-height: 27px;
}
#header_button span
{
padding: 0;
margin: 0;
}
Спустя 1 час, 21 минута, 16 секунд (12.06.2011 - 14:07) Michael написал(а):
Тебе надо чтобы и по вертикали центрировалось?
Вообще - padding выставляй синему блоку , картинке - float:left; margin-right.
Вообще - padding выставляй синему блоку , картинке - float:left; margin-right.
Спустя 3 часа, 3 минуты, 27 секунд (12.06.2011 - 17:10) Rigel написал(а):
Michael
с текстом получилось
только теперь надо все это выровнять по центру дива по вертикали
table-cell и vertical-align не помогает
с текстом получилось
только теперь надо все это выровнять по центру дива по вертикали
table-cell и vertical-align не помогает
Спустя 25 минут, 6 секунд (12.06.2011 - 17:35) inpost написал(а):
Rigel
padding-top
padding-top
Спустя 2 минуты, 12 секунд (12.06.2011 - 17:37) Rigel написал(а):
inpost
а к чему его применить?
и сколько поставить? 50%?
а к чему его применить?
и сколько поставить? 50%?
Спустя 5 минут, 40 секунд (12.06.2011 - 17:43) nugle написал(а):
Так попробуй
#header_button
{
float: right;
width: 170px;
height: 27px;
line-height: 27px;
}
#header_button span
{
padding: 0;
margin: 0;
}
#header_button div{
display:inline-block;
vertical-align:middle;
}
.helper {
display:inline-block;
vertical-align:middle;
height:100%;
width:0px;
}
<div id="menu">
<div id="header_button">
<div>
<img src="img.gif" alt="" />
<span>Тут надпись в 2 или 3 строчки</span>
</div>
<div class="helper"></div>
</div>
</div>