CODEWITHSUNDEEP
htmlcss
CogitoErgoSum
CogitoErgoSum

Reputation: 2907

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>

Upvotes: 0

Views: 153

Answers (2)

NoxiousNick
NoxiousNick

Reputation: 11

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. https://i.sstatic.net/fx3JP.png What browser are you using?

Upvotes: 0

Icid
Icid

Reputation: 1464

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

Upvotes: 2

Related Questions