[英]Vertical align image within parent div with css
So I'm trying to vertical align images within a container div. 所以我试图在容器div中垂直对齐图像。 I tried adding vertical-align: middle;
我尝试添加vertical-align:middle; to the parent div with no luck.
没有运气的父母div。
<div class="contributor_thumbnail"><img src="image.jpg"></div>
<div class="contributor_thumbnail"><img src="image.jpg"></div>
.contributor_thumbnail {
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
vertical-align: middle;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
What I would do is set the image as a background image. 我要做的是将图像设置为背景图像。
.contributor_thumbnail {
/* Background image instead of using and img tag */
background: url(image.jpg) center center no-repeat;
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
Try this: 试试这个:
HTML HTML
<div class="contributor_thumbnail">
<div class="content">
<img src="image.jpg">
</div>
</div>
CSS: CSS:
.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;}
.content {clear:both; height:240px; position:relative;}
Inspired by: Lost in the Woods vertically centering with CSS . 灵感来自: 迷失在伍兹垂直居中的CSS 。
.contributor_thumbnail img {
margin-left: auto;
margin-right: auto;
}
http://www.bluerobot.com/web/css/center1.html http://www.bluerobot.com/web/css/center1.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.