如何使用css实现 img 和文本在 a 元素内垂直居中
css样式定义如下：
a{vertical-align: middle; }
a>img{width: 1rem; height: 1rem;}
a>span{vertical-align: bottom;}
html代码如下：
<a href="/"><img src="/hello.jpg"/><span>你好</span></a>
css样式的重点是 a 元素的 vertical-align: middle;
span 元素的 vertical-align: bottom;
为什么span元素要使用 vertical-align: bottom;
文本内容默认会在顶部有一部分空白，如果设置 vertical-align: bottom; 空白会消失。此时父元素设置成 vertical-align: middle; 就能实现图片和文本都垂直居中。
我的笔记