html - 如何垂直对齐 div 中的元素？

Question

我有一个带有两个图像和一个 h1 的 div。所有这些都需要在 div 内垂直对齐，彼此相邻。其中一张图片需要 absolute 定位在 div 内。

在所有常见浏览器上都需要什么 CSS？

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

Answer 1

哇，这个问题很受欢迎。这是基于对 vertical-align 属性的误解。这篇优秀的文章解释了它:

Understanding vertical-align, or "How (Not) To Vertically Center Content"作者:Gavin Kistner。

“How to center in CSS” 是一个很棒的网络工具，它有助于为不同的情况找到必要的 CSS 居中属性。

---

简而言之_{^{(并防止链接失效)}}:

• 内联元素(和仅内联元素)可以通过vertical-align: middle在其上下文中垂直对齐。但是，“上下文”并不是整个父容器的高度，而是它们所在的文本行的高度。jsfiddle example
• 对于 block 元素，垂直对齐更难，很大程度上取决于具体情况:
  • 如果内部元素可以有一个固定高度，你可以将它的位置设为absolute并指定它的height,margin- top 和 top 位置。 jsfiddle example
  • 如果居中元素由单行组成 并且 它的父级高度是固定的你可以简单地设置容器的line- height 填充其高度。根据我的经验，这种方法非常通用。 jsfiddle example
  • ……还有更多这样的特殊情况。