vertical-align

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 技巧说明
只要是inline水平元素（inline、inline-block）或者table-cell，都会受到vertical-align和line-height的影响，因此如果开发中遇到行内元素奇怪的现象，可以从这两个属性着手。此外，如果行内元素发生嵌套，那么外层行内元素的vertical-align也可能会影响内部的，所以要一层一层看。
要将幽灵空白结点考虑进去，可以添加一个辅助的结点来表示幽灵空白结点“现身”时的情况，辅助结点中加入一些文字，一般为x，然后对辅助结点设置inline-block化+背景色，即可看出幽灵空白结点所占据的行内框。如果不设置inline-block的话，即inline，那么设置背景色后显示的就是内容区，即不包含上下行间距的区域。
第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<font-size，那么父元素文字的上下行间距为负值。（接下来的原理就不算很理解了？）

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

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

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

<div>
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2096432854,4113309096&fm=26&gp=0.jpg"
         width="150" height="150" alt="Some of a team"><span>xx</span>
</div>
    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无依赖的绝对定位

<span class="wrapper">
    <i class="icon-warn"></i>这是一段文本
</span>

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。

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



<span class="wrapper">
    <i class="icon-warn"></i>这是一段文本<span class="inline-block-node">x</span><span class="inline-node">x</span>
</span>
    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元素无依赖绝对定位时，其上移的停止位置是相对于能够限制它的那个行框，这个行框一般就是父元素，但是如果涉及多个行内元素的嵌套的话