首页  >  文章  >  web前端  >  css深入理解vertical-align的详细介绍

css深入理解vertical-align的详细介绍

高洛峰
高洛峰原创
2017-03-22 15:03:131469浏览

第一讲:vertical-align家族基本认识

         了解vertical-align支持的属性值以及组成

         属性:

                   1.inherit

                   2.线类

                            baseline,top,middle,bottom

                   3.文本类

                            text-top,text-bottom

                   4.上标下标类

                            sub,super

                   5数值百分比类

                            20px,2em,20%

                      共性 都带数值 20px 20em 20%,都支持负值 margin,letter-spacing word-spacing vertical-align,行为表现一致 在baseline对齐基础上上下偏移对应数值大小

                            百分比类的差异

                                     vertical-align的百分比值是相对于line-height计算的。

第二讲vertical-align起作用的前提

         探讨各种display值对vertical-align的影响

             vertical-align起作用是有条件的,应用于inline水平以及table-cell元素

                   inline水平的元素

                            img span strong em

                   inline-block input

                   table-cell元素

                            .table-cell:

         默认状态下:图片,按钮,文字,和单元格

                   1.display:更改元素的显示水平

                   2.css声明更改元素的显示水平

         在一个P标签中的img标签 设置了vertical-align:middle 图片不居中

                   不是vertical-align没起作用,而是太短,不够居中

         实战:多行文字与图片垂直居中

                  

                            文字

                           

                  

                   .test-list {text-align:justify}

                   .test-list > span{ display:inline-block; width:210px; vertical-align:middle }

                   .test-list > img{vertical-align:middle;}

第三讲 vertical-align 与 ling-height

         vertical-align百分比是相对于line-height值计算的

                   {

                            line-height:30px;

                            vertical-align:-10%;

                   }相当于vertical-align=-3px

         内联图片里面下边出现了空白,解决方法去掉行高,或者改变vertical-align属性bottom,top,middle都可以

         基本现象衍生:垂直居中

                   vertical-align:middle;line-height:36px;

                   设置标签应用比图片大的行高,图片就近似垂直居中了。

第四回  vertical-align线类属性值深入理解

                   底线,顶线,中线的行为表现

                   vertical-align:bottom

                            1.inline/inline-block元素:元素底部和整行的底部对齐

                            2.table-cell元素:单元格底padding边缘和表格行底部对齐

                   vertical-align:top

                   vertical-middle

                            1.inline/inline-block元素:元素的垂直中心点和父元素基线上1/2 x-height处对齐

                            2.table-cell元素:单元格填充盒子相对于外面的表格行居中对齐。

                            近似垂直居中

                            完全垂直居中:设置font-size:0

第五回     深入理解vertical-align文本类属性值

         vertical-align:text-top/text-bottom

         定义

                   1.vertical-algin:text-top

                            盒子的顶部和父级centent-area的顶部对齐

                   2.vertical-align:text-bottom

                            盒子的底部和父级content area的底部对齐

         1.元素vertical-align垂直对齐的位置与前后的元素都没有关系;

         2.元素vertical-align垂直对齐的位置与行高line-height没有关系,至于字体大小与font-size有关

         实际作用

                   表情图片与文字的对齐效果 图片(16x16)

                   使用基线的问题在于图标偏上

                   使用顶线/底线的问题在于受其他内联元素影响,造成巨大定位偏差

                   使用中线也是不错的选择,单需要恰好的字体大小以及兼容性要求不高

                   使用文本底部较合适不受行高以及其他内联元素影响;

第六回 vertical-align上标下标类

         1.html中的上标    

         2.html中的下标    

         变小的是原来字体的75%大小

         1.    -->vertical-align:super

         2.  -->vertical-align:sub

         定义

                   1.vertical-align:super

                            提高盒子的基线到父级合适的上标基线位置。

                   2.vertical-align:sub

                            降低盒子的基线到父级合适的下标基线位置。

         实际应用

第七回:vertical-align前后不一的作用机制

         相邻元素不同vertical-align的行为表现

         当出现前后不一致的时候

                   关注当前元素和父级,

                   前后并没有直接影响

第八回     vertical-align糟糕的兼容性

         IE6/7

         firefox/chrome

以上是css深入理解vertical-align的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn