<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>横向对齐+垂直居中</title>
<style type="text/css">
.box{height:100px;border:1px solid #000;}
.box input,.box span{vertical-align:middle;}
.pillar{display:inline-block;width:0px;height:100%;vertical-align:middle;} / width:0的话，在opera下会失效。当然也有另外的方法来解决opera /
</style>
</head>
<body>
<div class="box">
<span class="pillar" ></span>vertical-align:middle<input type="text" style="padding:10px;" /><span>各元素横行对齐</span>
</div>
</body>
</html>
原文参考：http://www.cssass.com/blog/index.php/2010/490.html
line-height可以应用在所有元素上。
但尽管line-height可以加在block元素上，实际起作用的却是内部的inline元素或textnode节点(也体现了它的继承性质)。
非可置换inline元素没有height;每一行的高度就由line-height决定。
而对于可置换inline元素，他本身其实是有内在高度的，将不受line-height影响（ie7是个例外）。
但这点性质，似乎正在改变。
css2.1也如是说：对于block,inline-block(可置换inline元素就是天生的inline-block元素), line-height是做为其minimal height的。那当高度小于line-height时，是理应起作用的。
我们使用html5的doctype声明:
在上面的例子里，除了ie6，这里的line-height在其他浏览器都能起作用。
总之，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的——如果要考虑ie6，请记住这一点。
那么，如何才能做到inline元素(包括可置换inline元素)的垂直居中，并且推而广之应用在block元素上呢？我们可以利用vertical-align属性。
现在先摘要说下vertical-align属性。
在CSS Specification中，line-height属性和vertical-align属性就是放在一起做介绍的。
Line height calculations: the ‘line-height’ and ‘vertical-align’ properties
vertical-align的默认值是baseline;
与line-height不同，vertical-align只能用在inline元素（还有’table-cell’ 元素）上
vertical-align属性在各个浏览器下都有不少的差异。参见：http://www.mikkolee.com/13
不过，我们要用到的属性middle在各个浏览器解释中却没有什么差异（或只有微小的差异）。
让同行的inline元素按中间线对齐，我们给各个inline元素加上vertical-align:middle;
接着我们要相对外层做垂直居中。
假如，内部的一个inline元素（当然是可置换inline元素,或是设置了inline-block的元素——这二者其实是一样的）的高度也达到外层的高度，那么就可以保证内层所有的inline元素都垂直居中了。
所以我们可以设置这样一个空元素pillar。
是不是很熟悉啊，我们“未知尺寸元素的垂直居中”的一个方法就是从这里衍生而来的——那是针对block元素的居中：http://www.cssass.com/blog/index.php/2008/36.html
做法就是将block元素变成inline-block,或者干脆使用某一inline元素包住block元素（尽管这不符合标准），然后再使用上面的方法。