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字号大小的文字的内容区域的上边缘对齐了如图所示:
css基础---vertical-align三_第1张图片
首先,文本类属性值的垂直对齐与左右文字大小和高度都没有关系,而所有线性类属性值的定位都会受到兄弟内联元素的影响。其次,文本类属性值的垂直对齐可以像素级精确控制。通常而言,无论是图文对齐还是文字和文字对齐,文字大小或图片的高度都是固定的,不可能说为了对齐效果,把设计师设计好的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实现,非常好理解。

你可能感兴趣的:(css学习笔记,css)