vertical-align的垂直居中 上标下标 及line-height

1.近似垂直居中

        根据定义:元素垂直中心点和父级基线上1/2X-height对齐例如


p{line-height;200px;}img{vertical-align:middle;}

vertical-align的垂直居中 上标下标 及line-height_第1张图片

黄线为容器中心。红线为图片中心,把图片放大后 我们会发现图片并没有完全垂直居中,这是因为字符都有下沉特性,

这时候应该设置font-size=0,就使得元素字符中心线 底线    基线往上二分之一高度都在一条线上重合了这样图片就能垂直居中了

2.vertical-align前提条件

vertical-align百分比是相当于行高line-height来计算的,为什么我们有时候写vertical-align:middle;却没有效果呢?因为它是有前提条件的!它只能适用于inline水平以及table-cell元素。(默认状态下,有图片,按钮,文字,单元格)行高太短,不够居中。display:table-cell属性指让标签以表格单元格的形式呈现,类似于td标签,我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性。

       下面看一段代码:div>span{display:table-cell; width:1em; height:1em; border:1px solid #beceeb;font-size:144px;text- align:center; vertical-align:middle;}

       div img{vertical-align:middle;}

   总结 :三步

             vertical-align的垂直居中 上标下标 及line-height_第2张图片


3.上标下标

vertical-align:super;提高盒子的基线到父级合适的上标基线位置;

vertical-align:sub;降低盒子的基线到父级合适的下标基线位置。









你可能感兴趣的:(vertical-align的垂直居中 上标下标 及line-height)