如何在div中垂直对齐元素？

Question

我有一个包含两个图片的div和一个h1。它们都需要在div内垂直对齐，彼此相邻。

其中一张图片需要absolute放在div内。

要在所有常见的浏览器上运行，需要什么CSS？

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

Answer 1

简而言之：

• 内联元素 （并且 仅 内联元素）可以在上下文中垂直对齐vertical-align: middle。但是，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度
• 对于块元素，垂直对齐更加困难，并且在很大程度上取决于特定情况：
  • 如果内部元件可以有一个 固定的高度 ，可以使自己的立场absolute，并指定其height，margin-top和top位置。
  • 如果居中元素 由单条线组成， 并且 其父级高度是固定的 ，则只需设置容器的line-height高度即可填充其高度。根据我的经验，此方法用途广泛。
  • ……还有更多这样的特殊情况。