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.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并了解更多

Answer 2

请保持简单。

标记：

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

样式表：

.left img { 
    vertical-align: middle; 
}

With this result

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

2 个答案: