Why won't it be vertically aligned? Img to the left of the div
I am still having problems with vertical alignment even though I have used it many times. In this case, I have an img on the left and a div on the right, here is my code:
.review {
font-size: 1em;
}
.avatarImg {
float: left;
width: 25%;
}
.reviewBlock {
width: 75%;
float: left;
}
<div class="review">
<img class="avatarImg" src="http://via.placeholder.com/200x200" alt="">
<div class="reviewBlock"> <!-- misc elements --> </div>
</div>
My img is a few pixels shorter than my checkBlock, so I would like it to be pushed down without using margin. As far as I can see there is a baseline, see these pictures.
I tried putting display:inline-block
on both the img and the div as well as on vertical-align:middle
and it didn't do anything. Can anyone explain what is going on here? Thank you so much.
source to share
Adding display: inline-block; vertical-align: middle;
to both elements will align them.
Make sure you uninstall as well float
, otherwise it won't work
Since they are inline-block
, I also removed the space between them by concatenating them with a comment<!-- -->
.review {
font-size: 1em;
}
.avatarImg {
display: inline-block;
vertical-align: middle;
width: 25%;
}
.reviewBlock {
display: inline-block;
vertical-align: middle;
width: 75%;
}
<div class="review">
<img class="avatarImg" src="http://placehold.it/100/f00" /><!--
--><div class="reviewBlock">
Blaa blaa<br> Blaa blaa<br> Blaa blaa<br> Blaa blaa
</div>
</div>
source to share
You can also do this with Flexbox :
.review {
display: flex; /* or "inline-flex" / displays flex-items (children) inline */
align-items: center; /* centers them vertically */
}
<div class="review">
<img class="avatarImg" src="http://via.placeholder.com/200x200" alt="">
<div class="reviewBlock">This text is vertically centered.</div>
</div>
source to share