第一图是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>