常见的对齐问题:浏览器是基于什么对齐图标和文本的?
为什么明明使用了 flex或vertical-align,图标还是看起来差了 1 像素没对齐?
文字图标布局
开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:
html部分:
xx测试对齐Style-
css部分:
.wrap {
width: 300px;
text-align: center;
margin: 20px auto;
font-size: 14px;
}
.wrap img {
width: 20px;
}
未使用对齐方式的效果如下:
默认的对齐方式是baseline,也就是x字母的最下面那条线。
这也就回答了第一个问题,浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准,也就是vertical-align:baseline;。
怎么让图片跟文字居中对齐呢,下面来看几种常见的解决方案。
常见的几种居中方案
1、使用vertical-align 居中对齐方式
.wrap {
vertic