居中单行文字基本上大家都使用行高(line-height)来处理,当然也可以使用padding来处理,不过使用line-height更方便控制单行的高度,而对于多行文字的话,行高就不适合了,在没有定义高度的情况下,可以使用padding来控制,例如:
.valign { border: 2px solid #444; padding: 30px 0; }
效果如下所示:
当然大家一定不会满足这种未知高度的垂直居中。对于有定义高度的,非IE6和IE7的,只要把它的display属性定义为table-cell就可以简单解决,没错,用表格的属性。效果如下所示:
.valign { height: 160px; display: table-cell; vertical-align: middle; border: 2px solid #444; }
注意,当display是table-cell时,边框是算在width里面的。