vertical-align的应用

参考张鑫旭慕课网CSS的absolute课程：https://www.imooc.com/learn/542

1.vertical-align概述

1.1 适用元素

默认状态下能够使用vertical-align属性的元素有：图片、按钮、文字、单元格等

• inline水平元素：、、、、匿名文本结点、...
• inline-block元素：（IE8+）、（IE8+）
• table-cell元素：

         元素可以通过2种方式改变元素的display水平，与vertical-align相关的结论为

（a）display: 更改元素的显示水平。将一个默认block的元素显式设置display为inline、inline-block、table-cell，那么就可以使用vertical-align属性了。

（b）CSS声明更改元素的显示水平。比如，浮动或者绝对定位、固定定位都能够使得元素的display间接变成block，因此不支持vertical-align属性。

1.2 取值

第1种分类方式：

        线类：baseline、top、middle、bottom

       文本类：text-top、text-bottom

       上标下标类：sub、super

      数值百分比类：20px、2em、20%...

第2种分类方式：

相对于父级元素content area：baseline、text-top、text-bottom、middle、、百分比

        特点：与line-height无关，与基线有关（而基线与font-size和font-family有关）。与其他行内框也没有关系。

相对于行框：top、bottom

       特点：与行框中各元素的line-height有关，因此效果与其他行内框有关。

1.3 技巧说明

1. 只要是inline水平元素（inline、inline-block）或者table-cell，都会受到vertical-align和line-height的影响，因此如果开发中遇到行内元素奇怪的现象，可以从这两个属性着手。此外，如果行内元素发生嵌套，那么外层行内元素的vertical-align也可能会影响内部的，所以要一层一层看。
2. 要将幽灵空白结点考虑进去，可以添加一个辅助的结点来表示幽灵空白结点“现身”时的情况，辅助结点中加入一些文字，一般为x，然后对辅助结点设置inline-block化+背景色，即可看出幽灵空白结点所占据的行内框。如果不设置inline-block的话，即inline，那么设置背景色后显示的就是内容区，即不包含上下行间距的区域。
3. 第2点依赖于如下事实

         在background-color应用范围上，display:inline的元素将背景颜色应用在内容区（content area），而display:inline-block的元素将背景颜色应用在整个行内框（inline box），即，上下行间距+内容区。

2. 消除图片下方的空隙

问题出现的原因：图片与父元素内容区基线对齐，也就是图片与幽灵空白结点的基线对齐，而一般情况下幽灵空白结点的行内框高度不为0，下面三个图片说明了这个问题产生的原因。

默认基线对齐                                   用span显示幽灵空白结点                将span设置为diplay:inline-block+背景色

解决方法：

方法1：图片display:block

思路：图片下方空隙出现的原因就是因为图片默认的vertical-align为baseline，而vertical-align只适用于inline、inline-block、table-cell元素，将图片设置为block，这样vertical-align就不适用了。

---

方法2：图片vertical-align:middle、top、bottom

思路：让图片的vertical-align不为baseline，但是注意text-top和text-bottom不行，可以自己尝试看看效果就知道了。

---

方法3：图片的父元素line-height足够小，小于父元素font-size即可，0也行。

思路：由于内容区的高度近似等于font-size，如果line-height接下来的原理就不算很理解了？）

---

方法4：图片的父元素的font-size为0。

思路：由于父元素内容区的高度，即em框的高度取决于font-size和font-family，但是不完全等于某一字体下的font-size，只有在宋体下是一样的。因此当设置父元素的font-size为0时，父元素的内容区就为0，那么匿名结点就不存在了。（接下来的原理就不算很理解了？）

为了说明原理，把辅助的span也加上了。

    

        xx
    

        div {
            color:white;
            background-color: orangered;
            width:200px;
        }
        span {
            display: inline-block;
            background-color: black;
        }

方法1：

        img {
            display: block;
        }

匿名空白结点还在的时候                                            去掉匿名空白结点即可实现要求

                               

方法2：

图片vertical-align:middle;                             图片vertical-align:top;                               图片vertical-align:top;

                       

注意：判断vertical-align的top和bottom时，要先根据当前的其他行内框（vertical-align不为top、bottom的行内框以及幽灵空白结点）确定一个初步的行框，再top或者bottom对齐，如果top或者bottom对齐以后使得整体行框的顶或者低发生了变化，那么要将整个行框中其他的vertical-align为top或者bottom的元素重新调整垂直位置。

方法3：

        div {
            line-height: 10px;
        }

方法4：

        div {
            font-size: 0;
        }

3.小图标与文本的对齐

三种推荐方法：

    方法1：vertical-align的负值

    方法2：vertical-align的text-top和text-bottom

    方法3：absolute无依赖的绝对定位

    
        这是一段文本
    

3.1 vertical-align负值

建议（张鑫旭）：20*20图标 后接14px文字 vertical-align:-5px;效果比较好，在所有浏览器中都可以使用。

效果（含背景色）                                    效果（去掉背景色）

           

        i {
            display: inline-block;
            width:20px;
            height:21px;
            background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center cornflowerblue;
            vertical-align: -5px;
        }
        span.wrapper {
            background-color: yellowgreen;
        }

3.2 vertical-align：text-top和text-bottom

在3.1代码基础上，将vertical-align改为text-top或者text-bottom

      text-top                                              text-bottom

           

3.3 vertical-align各种方法的对比

（1）vertical-align:baseline;

     优点为baseline在各个浏览器的兼容都比较好，但是缺点为图标偏上。

（2）vertical-align负值

       由于vertical-align是相对于基线的偏移，且兼容性也不错，所以是值得推荐的方法。优点：vertical-align负值只与父元素基线有关，而基线只与font-family和font-size有关。与line-height无关，也不受其他行内元素的影响。

（3）vertical-align: top、bottom

       缺点在于容易受到其他行内元素的影响，造成巨大定位的偏差。且与line-height有关。

（4）vertical-align:middle

         缺点在于需要恰好的字体大小，且兼容性不好，而且也不是绝对的垂直居中。

（5）vertical-align:text-top、text-bottom。

      优点：

• 由于与父级content-area的底部/顶部对齐，而父级content area与font-size和font-family有关，因此text-top、text-bottom与font-size、font-family有关。
• 兼容性好，在IE6、IE7也不错。

        接下来，为了更清晰的分析各种方法的差异，我们增加2个显式的匿名结点，其中一个inline-block化、添加背景色，另一个依然是inline水平，也添加了背景色。给父元素span.wrapper设置行高40px。

        初始效果（不加小图标，也就是标签vertical-align，也就是默认值baseline）

    
        这是一段文本xx
    

        i {
            display: inline-block;
            width:20px;
            height:21px;
            background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center cornflowerblue;
        }
        span.wrapper {
            background-color: yellowgreen;
            line-height: 40px;
        }
        .inline-block-node {
            display: inline-block;
            background-color: black;
            color:white;
        }
        .inline-node {
            background-color: deeppink;
            color:white;
        }

           接下来给出以上各种方法的效果，这里我们对父元素span给出了两种情况，分别为inline和inline-block时的效果

      理解：由于对一个inline元素添加背景色，背景色作用区域为其content area，而如果将其inline-block化，那么背景色作用区域为其行内框。如果我们将span元素inline-block化，但这个span中又包含了其他inline、inline-block元素，那么这个父元素span此时的背景色有两方面的含义：一方面是span自身的行内框（inline box）区域，另一方面是作为内部inline、inline-block元素的行框（line box）区域。

方法	效果（父元素span为inline）	是否推荐	效果 （父元素span为inline-block）
vertical-align:middle
vertical-align:-5px;		推荐
vertical-align:top
vertical-align:bottom
vertical-align:text-top		推荐
vertical-align:text-bottom		推荐

3.4 无依赖绝对定位实现小图标与文字对齐

        
            这是一段文本
        

        i {
            display: inline-block;
            width:20px;
            height:21px;
            background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center cornflowerblue;
        }
        span.wrapper {
            background-color: yellowgreen;
        }

初始效果，默认基线对齐

接下来对进行无依赖绝对定位，此时span.wrapper只包含文字，而小图标跟随在文字的左侧，则图标与文字发生覆盖，效果为

i{
    position:absolute;
}

给span.wrapper添加padding-left:图标宽度，并给图标margin-left:自身宽度的负值，向左移动，效果为

span.wrapper{
    padding-left:20px;
}
i {
    margin-left:-20px;
}

       对inline、inline-block元素无依赖绝对定位时，其上移的停止位置是相对于能够限制它的那个行框，这个行框一般就是父元素，但是如果涉及多个行内元素的嵌套的话，如何确定可以参考《无依赖绝对定位的应用》那篇博文，当然这个也是个人理解。