单行文本和图片的水平中心线对齐方式

场景

div里面有一个img标签，然后按照设计图给把图片的宽度和高度赋给了父元素，给img设置宽度和高度为100%，这样子元素img的宽度和高度就等于父元素的宽度和高度，奇怪的是出现了下图所示的问题：

可以看到图1和图2的详情高度不一样，更加奇怪的是，两个img标签的宽度和高度也是一样的。

思路

因为不同字体会造成不同的渲染方式，比如下面这样，给这三个span标签的字体都设置了字体大小为100px，但是设置了不同的font-family，而表现出所看见的不一样的字体高度。所以首先给font-size设置为0，消除这个因素的影响。深究起来，其实每个内联元素会有两个高度：

• line-height

• 内容区域

每行内容可以由多个内联元素组成（内联标签或者是包含文本的匿名内联元素），每一行都叫做一个 line-box。line-height是实际的高度，这个高度用于计算 line-box 的高度，具体来说就是从子元素的最高点到最低点的高度。

vertical-align 属性也是计算 line-box 高度的重要因素之一，它的默认值是 baseline，也就是与其父元素基线相对齐；baseline 所处的高度跟字体也有关，浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符（CSS 文档将其称为 strut），并将其纳入 line-box 的高度的计算中。下图所示为vertical-align的取值效果：

方案

最终img标签的样式：

font-size:0;
vertical-align:top;
line-height:0;

效果：