css - 如何垂直对齐图像，即div旁边的动态高度

Question

就像标题说的那样，我想将一张图像放在垂直中心，该图像位于具有动态高度的 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 就像其他一些线程答案中建议的那样，但它没有用。

问候

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