vertical-align的深入学习

  W3C官方对vertical-align属性的定义有4个方面：    
（1）vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素；
（2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效；
（3）vertical-align属性对inline元素、inline-block元素和table-cell元素有效， 对block元素无效；
（4）vertical-align属性允许指定负长度值（如-2px）和百分比值（如50%）；

   vertical-align属性中的“基线”跟line-height属性中的基线是一样的道理。在CSS中，vertical-align属性最见的属性值有4个：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。

table-cell元素
    W3C定义：在表格单元格中，vertical-align属性可以定义单元格中内容的对齐方式。也就是说vertical-align属性对table-cell类型元素有效。
    这里要注意一下，table-cell元素跟inline、inline-block元素使用vertical-align是有很大区别的：
  （1）inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式；
  （2）table-cell元素的vertical-align属性是针对自身而言。vertical-align定义的是内部子元素相对于自身的对齐方式；

<html>
    <head>
        <meta charset="UTF-8">
        <title>闭包经典题型</title>
    </head>
    <style>
    /*vertical-align属性对inline元素、inline-block元素和table-cell元素有效， 对block元素无效；*/
        div{
            width: 500px;
            height: 500px;
            border:1px solid red;
            display: table-cell;/*设置了table-cell元素，vertical-align定义的是内部子元素相对于自身的对齐方式*/
            vertical-align: middle;
        }
        img{
            vertical-align:middle;/*img是inline元素，inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式*/
        }
    </style>
    <body>
        <div>我是文字<img src="img/bike-1.jpg" alt="">我是文字</div>
    </body>
</html>

 

posted @ 2016-09-24 10:47  进击的前端狗  阅读(251)  评论(0)  编辑  收藏  举报