html - 垂直居中对齐 div 内的图像？

Question

我有一个 div，其中包含 2 个图像。

第一张图片的高度与每个 div 高度相同，但第二张图片的高度小于 div 高度。我想垂直居中对齐这张我没能做到的图片。这是我的标记，请告诉我如何执行此操作，以便它适用于所有当前的浏览器。

谢谢

 <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

嗯，这里有很多错误...让我一一过一遍...

1) 这里没有引号 class=TI

2) 这里的容器 div 在哪里？ div.Container div.Left img.TI

您需要将第一张图片向左浮动，并将 position: relative; 赋给第二张图片，如下所示:

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;
}​

建议:清理 CSS 并了解更多信息