图片和span水平垂直居中问题(主要解决小图标+文字水平垂直居中的问题)
原代码
<li><a href=""><img class="thumb" src="./images/product-images/phone-items.webp" alt=""><span class="text">Note 11T Pro+</span></a></li>li a{display: block;width: 225px;height: 40px;padding: 18px 20px 18px 20px;background-color: blue;}.thumb{margin-right: 12px;}.text{float: left;font-size: 14px;line-height: 40px;}
对文字span使用height=line-height也无法使文字垂直居中
并且span的padding和maigin均无效果
通过对img设置垂直居中实现了将文字居中，虽然我不理解vertical-align:middle;
修改后的css代码
li a{display: block;width: 225px;height: 40px;padding: 18px 20px 18px 20px;background-color: blue;}.thumb{vertical-align:middle;margin-right: 12px;}.text{float: left;font-size: 14px;line-height: 40px;}
最后的效果
