CSS没有正确对齐

问题描述:

它已经有一段时间了,因为我已经做了一些如此基本的事情,但我不记得。我有一个基本的两列设置。在左栏div中我有文字和三个图像。每个图像高38像素。这是包裹在一个40像素的div与一个像素边框。前置图像是文本“如所见:”问题是文本在垂直方向没有正确对齐,并且位于图像的顶部或底部。下面是我目前的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

你可以自动换行“中所呈现的:”在一个跨度,并设置其行高度为图像的高度。

+0

而不是使用“vertical-align:middle”,即。 – Icid 2010-12-09 16:10:34

你的第三图像的src有一个额外的/在里面,它应该说“图像/ vogue.png”而不是“/images/vogue.png”

除此之外,我在Chrome中打开你的代码,它对齐很好。 http://i.stack.imgur.com/fx3JP.png你使用什么浏览器?