How to vertical middle align div with uncertain height img? - css

Question

UI told me to make a list, the list item height is not fixed, it depends on the images uploaded by user, and the user may upload a 10x1000 image or 1000x10 image, whatsoever, the image width is fixed to 100px, but height is auto. At right side of the image, there are some text written by user, which is not a one line text, it is multiline text which we don't know how many lines there will be.
html like below:
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
css as below:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
But the result is as below:
How can I make the text box vertical align middle to the image at left side?
All code is at Codepen, you can try it there.
Thank you!

Answer 1

Declare vertical-align: middle on the sibling element (.aaa) as well.
To display x2 sibling inline block-level elements vertically center to each other, both elements should have the property vertical-align: middle.
Code Snippet Demonstration:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle; /* additional */
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>

Answer 2

You can use the power of flex.
Use align-items: center to do the trick.
Check it out: https://codepen.io/anon/pen/dJmrvB

Answer 3

Solution1: Just apply vertical-align: middle; to .aaa class
.container {
border: 1px solid green;
padding: 1px;
position: relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
Solution2: Try to make use of flex CSS
.container {
border: 1px solid green;
padding: 1px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.container img {
width: 300px;
}
.aaa {
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>