如何在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;
}

＆＃34;清除＆＃34;如果你这样做，div就不会有必要。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;