如何在 div 元素内垂直居中图像？ [复制]

Question

我有一个问题，如何在 div 中居中显示图像？左边有文字，右边有图片。这个 div 的高度没有在 CSS 中设置，因为我希望它在添加更多文本时自动增加，并且我希望图像始终垂直居中。这可能吗？

<div class="container">
   <div class="text">
      <h2>Hello</h2>                                                                            
         <p>BlaBLA BLA BLA</p>  
   </div>
   <div class="pic">
      <img src="img/images/img-producent_53_53.jpg"  />                          
   </div>
   <div class="clear"></div>
</div>

Answer 1

您可以使用 CSS 表格单元格 + 垂直对齐功能。

.text, .pic {
    display: table-cell;
    vertical-align: middle;
}

如果您这样做，则不需要“清除” div。

.text, .pic {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
   <div class="text">
      <h2>Hello</h2>                                                                            
         <p>BlaBLA BLA BLA</p>  
   </div>
   <div class="pic">
      <img src="img/images/img-producent_53_53.jpg"  />                          
   </div>
</div>