vertically central aligning an image inside a div?

Question

I have a div which contain 2 images inside it.

First image's height is just as per div height but second image height is less then div height. I want to vertically central align this image which I have failed to do. Here is my markup, please advise me how to do this so that it will work in all current browsers.

Thanks

 <div class="left">
        <img alt="" src="Images/Logo.png" style=" border:2px dashed red;" />
        <img class=TI alt="Tayyiba Institute" src="Images/TayyibaInstitute.png" style=" border:2px dashed orange;" />
    </div>

    div.Container div.Left
{
width:50%;
float:left ;
display:inline;
}

div.Container div.Left img.TI
{        
 width:92px;
 height:95px;
 float:left;
 line-height:200px;
 vertical-align:middle;
 margin:auto 0 auto 0;
 display:block ;
}

Answer 1

Well here's a lot of mistakes...let me go through 1 by 1...

1) No quotes here class=TI

2) Where's the container div over here? div.Container div.Left img.TI

You need to float your first image to the left and give position: relative; to the second image like this :

My fiddle

HTML

<div class="left">
    <img alt="" src="Images/Logo.png" style=" border:2px dashed red; float: left;" />
    <img class="TI" alt="Tayyiba Institute" src="http://www.cbfaizabad.org.in/images/bullet/0043_bullet2.png" style=" border:2px dashed orange;" />
</div>

CSS

.Left
{
float:left ;
}

.TI
{        
    position: relative;
    top: 5px;
}​

SUGGESTION: Clean up the CSS And learn more

Answer 2

Please, keep it simple.

Markup:

<div class="left"> 
    <img alt="" src="Images/Logo.png" /> 
    <img alt="" src="Images/TayyibaInstitute.png" /> 
</div> 

Style sheet:

.left img { 
    vertical-align: middle; 
} 

With this result .