为什么不垂直对齐？ 我在div的左边

Question

I'm still having trouble with vertical-align, although having used it many times successfully. In this case, I have an img on the left and a div on the right, here's 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 reviewBlock, so I would like for it to be shifted down without having to use margin-top. As far as I can see there is a baseline established, see these pictures.

I have tried putting display:inline-block on both the img and the div, as well as vertical-align:middle and it has not done anything. Can anyone explain what's going on here? Much thanks.

Answer 1

Adding display: inline-block; vertical-align: middle; display: inline-block; vertical-align: middle; to both elements will align them.

Make sure you also removed float , or else this won't work

As they are inline-block I also removed the white space between the 2 by connecting 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> 

Answer 2

You can also do it with the 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> 

Answer 3

尝试将父元素与display：table和img元素放在display：table-cell和vertical-align中