vetical-align的功能是使行内元素垂直对齐。
可能的值
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
可以控制图片、文字等行内元素在行内的垂直方向上的对齐方式
如何使用vetical-align使块级元素垂直居中？
以下面为例：
body{
<div class="wrapper">
<div class="content">some content</div>
</div>
}
1、为父容器wrapper设置高度
html,body{
height:100%
}
.wrapper{
height:100%
}
2、使content容器显示为内联元素
.content{
display:inline-block;
}
3、利用before伪类在content容器之前构造一个空内容的inline-block
.wrapper:before{
content:"";
display:inline-block;
height:100%;
vetical-align:middle;
}
此时，整个页面只有一行，其中有两个inline-block，让空内容行内上下对齐
4、为content容器添加vetical-align属性
.content{
vetical-align:middle;
}
这样，块级元素在浏览器中始终都是垂直对齐的
还有诸如在html元素中添加空img属性或者显示为表格元素，均破坏了html元素的结构，在这里不做介绍。
利用伪元素对块级元素应用vetical-align:middle使之垂直居中
原文：http://www.cnblogs.com/olafff/p/5103775.html