本篇文章介绍了CSS如何设置文字图片垂直居中的解决办法，下面我们就来看看详细的教程，需要的朋友可以参考下
其实很简单，只需要在尾部增加一个 ，然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle;
看看效果图
实例代码
代码如下:
*{
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}
display: block;
http://static.mukewang.com/static/img/common/logo.png” />
文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文
http://static.mukewang.com/static/img/common/logo.png” />
http://static.mukewang.com/static/img/common/logo.png” width=”250″/>
http://static.mukewang.com/static/img/common/logo.png” width=”250″//>
http://static.mukewang.com/static/img/common/logo.png” width=”250″//>
http://static.mukewang.com/static/img/common/logo.png” width=”250″//>
第一行
1313第一行
1313
总结
以上就是这篇文章的全部内容了，希望对大家的学习或者工作带来一定的帮助。