So I'm trying to vertical align images within a container div. I tried adding vertical-align: middle; to the parent div with no luck.
<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
<div class="contributor_thumbnail">
<div class="content">
<img src="image.jpg">
</div>
</div>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With