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

您可以使用flex的力量。

使用align-items: center来解决问题。

检查出来：https://codepen.io/anon/pen/dJmrvB

Answer 2

同时在兄弟元素（vertical-align: middle）上声明.aaa。

要将x2兄弟内嵌块级元素垂直居中相互显示，两个元素都应具有属性vertical-align: middle。

代码段示范：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

解决方案1：只需将 vertical-align: middle; 应用于 .aaa 类

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案2：尝试使用 flex CSS

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: