CSS is not aligning properly

Its been a while since I have done something so basic and yet I can't recall. I have a basic two column set up. In the left column div I have text and three 开发者_运维知识库images. Each image is 38 pixels high. This is wrapped in a div of 40 pixels with a one pixel border. Prepending the images is text "AS SEEN IN:" The problem is the text isn't aligning properly in the middle vertically and is either at the top or bottom of the images. Below is my current css and code which isn't working..

<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>

You could wrap the text "AS SEEN IN:" in a span and set its line-height equal to the height of the images.

Your third image's src has an extra / in it, it should say "images/vogue.png" instead of "/images/vogue.png"

Aside from that, I opened your code in Chrome and it aligns just fine. http://i.stack.imgur.com/fx3JP.png What browser are you using?