vertical-align的深入理解

1：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计算的。

2       vertical-align起作用的前提

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

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

                   inline水平的元素

                            img span strong em

                   inline-block input

                   table-cell元素

                            .table-cell:<td>

         默认状态下：图片，按钮，文字，和单元格

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

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

 

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

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

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

                   <div class="test-list">

                            <span>文字</span>

                            <img src="test.jpg"/>

                   </div>

                   .test-list {text-align:justify}

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

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

 

3 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;

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

 

4  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

5     深入理解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）

 

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

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

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

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

 

6 vertical-align上标下标类

         1.html中的上标     <sup>

         2.html中的下标     <sub>

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

 

         1.<sup>    -->vertical-align:super

         2.<sub>  -->vertical-align:sub

 

         定义

                   1.vertical-align:super

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

                   2.vertical-align:sub

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

         实际应用

                  

7：vertical-align前后不一的作用机制

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

 

         当出现前后不一致的时候

                   关注当前元素和父级，

                   前后并没有直接影响

8     vertical-align糟糕的兼容性

         IE6/7

         firefox/chrome

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知