css基础---vertical-align三

1、vertical-align文本类属性值
vertical-align:text-top：盒子的顶部和父级内容区域的顶部对齐。
vertical-align:text-bottom：盒子的底部和父级内容区域的底部对齐。
假设元素后面有一个和父元素font- size、font-family一模一样的文字内容，则vertical-align:text-top表示元素和这个文字的内容区域的上边缘对齐。
父元素默认是16px，我们可以清晰地看到图片的上边缘和16px文字的内容区域的上边缘对齐了，改变父级元素的font-size大小，如24px，就会看到图片上边缘（对齐线）和24px字号大小的文字的内容区域的上边缘对齐了如图所示：

首先，文本类属性值的垂直对齐与左右文字大小和高度都没有关系，而所有线性类属性值的定位都会受到兄弟内联元素的影响。其次，文本类属性值的垂直对齐可以像素级精确控制。通常而言，无论是图文对齐还是文字和文字对齐，文字大小或图片的高度都是固定的，不可能说为了对齐效果，把设计师设计好的16px文字改成14px，因此，线性类属性值中的baseline和middle实现的对齐我们是无法精确控制其垂直对齐位置的，因为这两个值的对齐是和字符走的。但是，text-top和text-bottom则无此问题：如果是图文对齐，我们可以通过改变父元素的font-size大小精确控制对齐位置；如果是文字和文字对齐，我们可以改变文字的line-height，也就是通过改变元素的高度（上下边缘位置）精确控制对齐位置
2、vertical-align上标下标类属性值
vertical-align上标下标类属性值指的就是sub和super两个值。在HTML代码中，有两个标签语义就是下标和上标，分别是上标^{和下标_{。
HTML标签和的vertical-align属性也和super和sub有着非同一般的关系，那就是标签默认的vertical-align属性值就是super，标签默认的vertical-align属性值就是sub。
vertical-align:super：提高盒子的基线到父级合适的上标基线位置。
vertical-align:sub：降低盒子的基线到父级合适的下标基线位置。
有一点需要注意，vertical-align上标下标类属性值并不会改变当前元素的文字大小，千万不要被HTML标签中的和误导，因为这两个HTML标签默认font-size是smaller。
虽然同属线性类属性值，但是top/bottom和baseline/middle却是完全不同的两个帮派，前者对齐看边缘看行框盒子，而后者是和字符x打交道。
3、基于vertical-align属性的水平垂直居中弹框}}

<div class="container">   
<div class="dialog"></dialog> 
</div>

.container {   
position: fixed;   
top: 0; 
right: 0; 
bottom: 0; 
left: 0;   
background-color: rgba(0,0,0,.5);   
text-align: center;   
font-size: 0;   
white-space: nowrap;  
 overflow: auto; 
 } 
 .container:after {   
 content: '';   
 display: inline-block;   
 height: 100%;   
 vertical-align: middle; 
 } 
 .dialog {   
 display: inline-block;   
 vertical-align: middle;   
 text-align: left;   
 font-size: 14px;   
 white-space: normal;  
 }

此方法实现的原理关键就是两个vertical-align:middle，前面“图片近似垂直居中”那里只图片一个元素vertical-align:middle就实现了垂直居中，原因就是line-height大小设置得恰到好处，但是对于弹框，高度不确定，显然不能使用某个具体的行高值创建足够高的内联元素。于是，这里借助伪元素创建了一个和外部容器一样高的宽度为0的inline- block元素。有种“幽灵空白节点”的感觉。
vertical-align:middle定义是元素的中线和字符x中心点对齐。
（1）在本例中，由于font-size设置为0，所以x中心点位置就是.container的上边缘，此时，高度100%的宽度为0的伪元素的垂直中心位置和这个中心点对齐。如果中心点位置不动，这个伪元素上面一半的位置应该在.container的外面， 但是CSS中默认是左上方排列对齐的，所以，伪元素和这个原本在容器上边缘的x中心点一起往下移动了半个容器高度，也就是此时x中心点就在容器的垂直中心线上。
（2）弹框元素.dialog也设置了vertical-align:middle。根据定义，弹框的垂直中心位置和x中心点位置对齐，此时，x中心点就在容器的垂直中心位置，于是.dialog元素就和容器的垂直中心位置对齐了，从而实现了垂直居中效果。
（3）水平居中就text-align:center实现，非常好理解。