css - 如何垂直中间对齐具有不确定高度img的div？

Question

UI告诉我做一个列表，列表项的高度不固定，取决于用户上传的图片，用户可以上传10x1000的图片或1000x10的图片，无论如何，图片宽度固定为100px，但高度是自动的。在图片的右侧，有一些用户写的文字，不是一行文字，是多行文字，不知道会有多少行。

html 如下:

<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 如下:

.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;
}

但是结果如下:

如何使文本框垂直居中对齐到左侧的图像？

所有代码都在Codepen , 你可以在那里试试。

谢谢!

Answer 1

同时在同级元素 (.aaa) 上声明 vertical-align: middle。

要显示 x2 兄弟内联 block 级元素垂直居中，两个元素都应具有属性vertical-align: middle .

代码片段演示:

.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>