[英]vertically central aligning an image inside a div?
I have a div which contain 2 images inside it. 我有一个div,其中包含2个图像。
First image's height is just as per div height but second image height is less then div height. 第一个图像的高度与div高度相同,但第二个图像高度小于div高度。 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 ;
}
Well here's a lot of mistakes...let me go through 1 by 1... 那么这里有很多错误......让我逐一完成......
1) No quotes here class=TI
1)此处没有引号class=TI
2) Where's the container div over here? 2)容器在哪里? div.Container div.Left img.TI
You need to float your first image to the left and give position: relative;
您需要将第一张图像浮动到左侧并给出position: relative;
to the second image like this : 到这样的第二个图像:
HTML 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 CSS
.Left
{
float:left ;
}
.TI
{
position: relative;
top: 5px;
}
SUGGESTION: Clean up the CSS And learn more 建议:清理CSS并了解更多信息
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.