本文主要是介绍vertical-align:middle;之文本图片垂直居中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
第一图是div没有设置行高的，第二图是div设置了行高的，第三图增加了一个a标签且此a标签没带vertical-align:middle;属性，第四图给新增a标签增加vertical-align:middle;属性。
那么就会发现，元素定义vertical-align:middle;不会在父元素中垂直居中，会找到兄弟元素且也定义了vertical-align:middle;的元素相对垂直居中。
最后代码下面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>img{vertical-align: middle;border: 1px solid #000;}div{border: 1px solid #000;height: 100px;line-height: 100px;}a{vertical-align: middle; font-size: 56px;}span{vertical-align: middle;border: 1px solid #000;}.box2 span{font-size: 30px;}</style>
</head>
<body>
<div><img src="img/exit-nol@2x.png" alt=""><span>你好啊</span><a href="">我不好</a>
</div>
<div class="box2"><img src="img/exit-nol@2x.png" alt=""><span>你好啊</span>
</div>
<div class="box3"><img src="img/exit-nol@2x.png" alt="">
</div>
<div class="box3"><span>你好啊</span>
</div>
</body>
</html>这篇关于vertical-align:middle;之文本图片垂直居中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
