图片在盒子里面垂直居中的案例

当我们想要获得图片的垂直居中，可采用定位的方式来实现。
现在我选择用另一种方式来实现图片的垂直居中。
首先，先给盒子定义宽高满足于图片在盒子内能有足够的空间占位。
然后给盒子3个属性:
display: table-cell;
vertical-align: middle;
text-align: center;
此时我们发现图片并没有完全的垂直居中，而是图片往上移动了一点距离。从而我们有分析得出，图片在垂直方向上默认的对齐方式是vertical-align:baseline（默认），元素放置在父元素的基线上。
那么基线又是什么呢？这里可以引出文字和图片的对齐方式的概念：
属性 vertiacl-align
文字和图片默认是水平对齐的，即值为baseline(基线)
其他值：
top(顶部水平对齐)
middle（居中对齐）
bottom（底部对齐
text-bottom
text-top
sub
super
一、基本理论

1. 基线：一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。

2. 行高：文本行的基线间的距离

3. 行距：行高与字体尺寸的差称

4. 字体尺寸：font-size

5. 内容区域：一行中的每个元素都有一个内容区域，它是由字体尺寸决定的

6. 行内框：在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度。即：将行距的值（行高-字体尺寸）除以2，分别增加到内容区域的上下两边。

设置行高后，行高 === 行内框高？？？ 不一定

高度大于行高的图片会把行框撑开。此时，虽然撑开了行框，却不会影响行高。

当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，

如何计算行高，使得元素在指定区域内上下居中，间距适宜？ 行距*2+font-size；当行高小于字体大小时将出现行距为负数的情况，也就是两行文字将部分重合。

行框：指本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值


单行纯文本的垂直对齐：height = line-height

元素默认的垂直对齐方式为基线对齐

而像图片或者输入框这样的元素，本身没有基线，则将其底端同父元素的基线（行框的基线）对齐

二、案例解析

1. 为什么
   
   
   理解：图片的底部与该行的行框的基线（X的底部）对齐；当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，
2. 为什么
   
   在上述2样式的基础上为图片增加vertical-align: middle;

解释：当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐。当我们设置了垂直对齐方式vertical-align: middle;后，图片不再遵循基线对齐，而是中间对齐。中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。

三、vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit

说明： 设置元素内容的垂直对齐方式。
参数：

• baseline：使元素的基线同父元素的基线（行框的基线）对齐； 使元素的基线同基准元素（取行高最高的作为基准）的基线对齐
• sub（ super： 使元素的基线（替换元素的底
  端）相对于父元素的基线升高，下标（vertical-align:sub）使元素的基线降低
• top（bottom）：是将元素的行内框的顶端（底端）与行框的顶端对齐
• text-top（text-bottom）： 是将元素行内框的顶端（底端）同文本行的顶线对齐
• middle：通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐
• 百分比和长度： CSS2，可为负数。

初始值：baseline

继承性：不继承