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>

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

1 个答案: