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
  • 如果居中元素由单行组成 并且其父级高度是固定的，您可以简单地设置容器的行- height 填充它的高度。根据我的经验，这种方法非常通用。 jsfiddle example
  • ……还有更多这样的特殊情况。