深入line-height 和vertical-align

行高 line-height

vertical-align

vertical-align属性非常复杂，但是也相当强大。

根据W3C的定义，vertical-align属性用于定义周围文字、inline元素或inline-block元素的基线相对于该元素的基线的垂直对齐方式。在这个例子中，vertical-align属性定义了周围的文字相对于img元素基线的垂直对齐方式。

css
img{width:80px;height:80px;}
#img1{vertical-align:top;}
#img2{vertical-align:middle;}

html
    绿叶学习网<img id="img1" src="images/girl.png" alt=""/>绿叶学习网（<strong> top</strong>）
    <hr/>
    绿叶学习网<img id="img2" src="images/girl.png" alt=""/>绿叶学习网（<strong> middle</strong>）

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定义的是内部子元素相对于自身的对齐方式。用在需要居中的父元素上

css
td{
        width:120px;
        height:120px;
        border:1px solid gray;
        vertical-align:middle;
}

html
<td><img src="images/girl.png" alt=""/></td>