How to vertical middle align div with uncertain height img?

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!

Possible duplicate of [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Andy Ray, Jan 11 '18 at 05:31

score 1 · Answer 1 · answered Jan 11 '18 at 05:31

1

You can use the power of flex.

Use align-items: center to do the trick.

Check it out: https://codepen.io/anon/pen/dJmrvB

answered Jan 11 '18 at 05:31

Chen-Tai

3,435
3
21
34

score 1 · Accepted Answer · answered Jan 11 '18 at 05:32

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>

Bhuwan · Answer 3 · 2018-01-11T05:40:01.270

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>

How to vertical middle align div with uncertain height img?

3 Answers3