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

uzo 发表于 Dev

使用

就像标题说的那样，我想将具有动态高度的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就像在其他一些线程答案中所建议的那样，但是没有用。

问候

亚历克斯·查尔

一种解决方案是使用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>