DIV CSS文字图片垂直居中显示实例

让图片和文字在一起时候垂直居中！图片如何垂直居中等问题解决CSS代码

在不知道高度的情况下图片如何垂直居中对齐呢？

只需要在尾部增加一个<i></i>
把需要垂直居中的元素设置display:inline-block; vertical-align:middle;

CSS代码：

*{  margin:0 ; padding:0; }
.bg{ background-color:#333;text-align:center;} 
.bg img{ vertical-align:middle; } 
.test-list{ background-color:#999; height:100px; }    
.test-list > span{ display:inline-block; width:210px; vertical-align:middle}     
.test-list > img{ display:inline-block; vertical-align:middle}   
.justify-fix{ display:inline-block; width:250px; 
border-bottom:1px solod #F00} 
#p{text-align:center} 
#p span{ display:inline-block; vertical-align:middle; }    
#p i{display:inline-block; height:100%; vertical-align:middle} 

HTML内容代码：

<p class="bg"> 
  display: block; 
    <img src="//www.html8.com.cn/imgthink2015/logo.gif" /> 
</p> 
<div class="test-list"> 
  <span>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</span> 
  <img src="//www.html8.com.cn/imgthink2015/logo.gif" /> 
</div> 
<p style="text-align:justify; background-color:#666; line-height:0"> 
 <img src="//www.html8.com.cn/imgthink2015/logo.gif"  width="250"/> 
 <img src="//www.html8.com.cn/imgthink2015/logo.gif" width="250"//> 
 <img src="//www.html8.com.cn/imgthink2015/logo.gif" width="250"//> 
 <img src="http://static.mukewang.com/static/img/common/logo.png" width="250"//> 
 <i class="justify-fix"></i> 
 <i class="justify-fix"></i> 
 <i class="justify-fix"></i> 
</p> 
<br/> 
<p style="background-color:#666; height:200px;" id="p"> 
 <span>第1行<br/>1313</span><i></i><span>第1行<br/>1313</span> 
</p>