今天小编跟大家讲解下有关CSS设置文字图片垂直居中的方法总结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS设置文字图片垂直居中的方法总结 的相关资料，希望小伙伴们看了有所帮助。
其实很简单，只需要在尾部增加一个<i></i> ，然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle;
看看效果图
实例代码复制代码代码如下:<style>*{ margin:0 ; padding:0;}.bg{ background-color:#333;</p><p> text-align:center;}.bg img{ vertical-align:middle;</p><p> }.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><p>} #p i{ display:inline-block; height:100%; vertical-align:middle} </style></head></p><p><body><p class="bg"> display: block; <img src="https://www.aidi.net.cn//css/<a href="http://static.mukewang.com/static/img/common/logo.png">http://static.mukewang.com/static/img/common/logo.png</a>"/> </p><div class="test-list"> <span>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</span> <img src="https://www.aidi.net.cn//css/<a href="http://static.mukewang.com/static/img/common/logo.png">http://static.mukewang.com/static/img/common/logo.png</a>"/></div><p style="text-align:justify; background-color:#666; line-height:0"> <img src="https://www.aidi.net.cn//css/<a href="http://static.mukewang.com/static/img/common/logo.png">http://static.mukewang.com/static/img/common/logo.png</a>"width="250"/> <img src="https://www.aidi.net.cn//css/<a href="http://static.mukewang.com/static/img/common/logo.png">http://static.mukewang.com/static/img/common/logo.png</a>"width="250"//> <img src="https://www.aidi.net.cn//css/<a href="http://static.mukewang.com/static/img/common/logo.png">http://static.mukewang.com/static/img/common/logo.png</a>"width="250"//> <img src="https://www.aidi.net.cn//css/<a href="http://static.mukewang.com/static/img/common/logo.png">http://static.mukewang.com/static/img/common/logo.png</a>"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>第一行<br/>1313</span><i></i><span>第一行<br/>1313</span></p><p></p></body>
总结以上就是这篇文章的全部内容了，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
来源：爱蒂网
