html - 垂直居中元素。行高与填充

Question

我正在尝试找到将两个左浮动元素垂直居中的最佳方法。

center with padding: http://jsfiddle.net/fUmmM/14/

center with line-height: http://jsfiddle.net/fUmmM/15/

这两个版本都适用于较新的浏览器，但像 IE8 这样的旧浏览器呢？计算确切的填充以支持旧浏览器会更好吗？line-height 版本对我来说更像是一种 hack，但速度更快。

Answer 1

在 IE8 中，行高和填充通常都可以。虽然它在 IE6 中是错误的。

除此之外，无论如何更喜欢填充。除非您知道您的内容永远不必换行，否则不要使用line-height，因为一旦内容在两行或更多行上，与使用 padding 方法相比，使用 line-height 换行成多行的效果会更严重：

行高：http: //jsfiddle.net/fUmmM/16/

---

对比

填充：http: //jsfiddle.net/fUmMM/17/

Answer 2

center with line-height: http://jsfiddle.net/fUmMM/15/

以行高居中是垂直居中左浮动元素的更好方法