第一图是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>
本文发布于:2024-01-29 04:37:41，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170647426612749.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
