CSS中的文字对齐问题

要了解css中文字的对齐问题，首先要了解文字在浏览器中的基线baseline，基线在浏览器的位置如图所示：

由于基线的存在，当图片和文字在一行中显示时，底部将无法对齐。

我们可以看到这张图片的底部出现了一条粉色的缝隙，这是由于css中默认图片的底部是和文字的基线进行对齐的，这就导致浏览器为了能够显示文字基线以下的部分，会将盛放图片和文字的块元素进行加高，导致图片底部出现多余的缝隙。

要解决行内块元素/行内元素的对齐的问题我们就要用到垂直对齐方式vertical-align标签，vertical-align标签有4个值。

1、baseline    默认值，基线对其。

2、top            顶部对齐。

3、midde       中部对其。

4、bottom      底部对齐

在项目中，vertical-align能够解决如下问题：

1. 文本框和表单按钮无法对齐问题

2. input和img无法对齐问题

3. div中的文本框，文本框无法贴顶问题

4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5. 使用line-height让img标签垂直居中问题 

注意：

在实际开发中我们应避免出现行内块/行内元素在一行中显示，推荐使用浮动（float）来进行行内块元素的位置确定。