2010-12-09 2 views
0

Его было время, так как я сделал что-то такое основное, и все же я не могу вспомнить. У меня есть базовый набор из двух столбцов. В левом столбце div у меня есть текст и три изображения. Каждое изображение имеет высоту 38 пикселей. Это завернуто в div размером 40 пикселей с одной границей пикселей. Превращение изображений - это текст «КАК ЕСТЬ В:» Проблема заключается в том, что текст не выравнивается правильно по центру по вертикали и находится либо сверху, либо снизу. Ниже мой текущий CSS и код, который не работает ..CSS не выравнивается должным образом

<style type="text/css"> 
div.container { 
overflow: hidden; 
width: 100%; 

} 

div.left { 
width: 50%; 
float: left; 
background-color:#F0F1F3; 
    border: 1px solid #DEDEDE; 
} 

.textmiddle {vertical-align:middle;} 
div.right { 
width: 40%; 
float: right; 
background-color:#F0F1F3; 
    border: 1px solid #DEDEDE; 
}</style> 
<div class="container"> 
<div class="left"> 
AS SEEN IN:<img class="textmiddle" border="0" src="images/gq.png">&nbsp;<img class="textmiddle" border="0" src="images/nyTimes.png"><img border="0" src="/images/vogue.png" class="textmiddle"> 

</div> 
<div class="right">3</div> 
</div> 
+0

На что это должно быть похоже? – Hristo 2010-12-09 16:09:13

+0

Текст должен быть точно в середине, см. Скриншот NoxiousNick, хотя мой код не выравнивается. – CogitoErgoSum 2010-12-09 16:20:47

ответ

2

Вы можете обернуть текст «как показано на:» в пролете и установите высоту строки, равной высоте изображений. ЦСИ

+0

Вместо использования «vertical-align: middle», то есть. – Icid 2010-12-09 16:10:34

0

Вашего третьего изображения имеет дополнительный/в нем, он должен сказать «изображения/vogue.png» вместо «/images/vogue.png»

Кроме того, я открыл свой код в Chrome и он выравнивается просто отлично. http://i.stack.imgur.com/fx3JP.png Какой браузер вы используете?