垂直对齐的两个方案

真・懒写于

垂直对齐一直让人头痛,想用vertical-align?它只对表格有效。没错,只对display:table-cell的元素有效。嗯,所以,怎么办?简单,让元素display:table-cell呗,然后你就可以随心所欲让vertical-aligntop, middle(注意:不是center), bottom了。很遗憾的是,IE不支持。另外需要注意的是,display:table-cell的元素的上一级元素必须是display:table-row

例子:http://realazy.com/lab/valign/align1.html

下面这种方案使用相对定位和绝对定位相结合的办法。这种办法底对齐十分有效,但需要垂直居中或者水平居中,则需要强制定义该元素的宽度和高度。在此只举例底对齐,需要垂直/水平居中对齐留待大家研究,可以参考我以前的水平居中的文章:元素水平居中方案总结的"负边界解决方案"一节。

一个元素position: relative后,里面使用position: absolute的元素则可以相对上一级元素定位。该元素bottom: 0就可实现严格意义上的底对齐了。

例子:http://realazy.com/lab/valign/align1.html