如何垂直对齐图像，即具有动态高度的 div 旁边答案

【问题标题】：how to vertically align image, that is next to div with dynamic height如何垂直对齐图像，即具有动态高度的 div 旁边
【发布时间】：2014-12-15 22:48:14
【问题描述】：

就像标题说的那样，我想将具有动态高度的 div 旁边的图像放入垂直中心。这是代码：http://jsfiddle.net/txuxn4c1/2/

<div class="element">
    <div class="logo_div">
        <img src="http://www.iconsdb.com/icons/download/orange/stackoverflow-4-32.jpg" width="30px" height="30px" />
    </div>
    <div class="text_div"> 
        text here<br />
        text here<br />
        text here<br />
        text here<br />
        text here<br />
    </div>
    <div style="clear:both"></div>
</div>

.element {
    border: 1px solid green;
}
.logo_div {
    float: left;
    border: 1px solid blue;
}
.text_div {
    float: left;
    width: 105px;
    border: 1px solid red;
}

我尝试将 div 样式显示设置为 inline-block 或 table(-cell) 和 vertical-align: middle 就像其他一些线程答案中建议的那样，但它不起作用。

问候

【问题讨论】：

标签： css image vertical-alignment

【解决方案1】：

一种解决方案是将display: table-cell 与vertical-align: middle 一起使用：

.element {
  border: 1px solid green;
}
.logo_div {
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.text_div {
  display: table-cell;
  width: 105px;
  border: 1px solid red;
  vertical-align: middle;
}

<div class="element">
  <div class="logo_div">
    <img src="http://www.iconsdb.com/icons/download/orange/stackoverflow-4-32.jpg" width="30px" height="30px" />
  </div>
  <div class="text_div">text here
    <br />text here
    <br />text here
    <br />text here
    <br />text here
    <br />
  </div>
  <div style="clear:both"></div>
</div>
<div class="element">
  <div class="logo_div">
    <img src="http://www.iconsdb.com/icons/download/orange/stackoverflow-4-32.jpg" width="30px" height="30px" />
  </div>
  <div class="text_div">text here
    <br />text here
    <br />text here
    <br />text here
    <br />text here
    <br />
  </div>
  <div style="clear:both"></div>
</div>

【讨论】：