如何在div旁边水平对齐图像

Question

我正在尝试将图像与包含这样两行文本的div对齐：

这是我目前的

<div class="first-div">
  <img class="img" src="/image-icon.png" />

  <div class="second-div">
    <p class="m-0">hello world</p>
    <p class="m-0">hello world</p>
  </div>
</div>

我当前的CSS：

.second-div {
  display: inline-block;
  margin-left: 15px;
  height: 50px;
  vertical-align: center;

}

.first-div{
  display: inline-block;
}

.img {
  vertical-align: middle;
  display: inline-block;
  margin-top: auto;
  margin-top: bottom;
  height: 50px;
  width: 50px;
}

.m-0 {
  margin: 0;
  text-align: center;
}

但是我似乎无法对齐它们而不必在图片上添加底边距，我认为这是错误的解决方法。

我创建了一个js小提琴，以便大家看看https://jsfiddle.net/sav1bpk0/25/

Answer 1

删除第二个框的高度，也应像设置img一样将vertical-align设置为中间，而不是居中

.second-div {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
}

在第二个框上设置高度时，由于框与图像对齐，因为它们具有相同的高度，但是框内的内容未垂直对齐。