一尘不染

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

html

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

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

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

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

阅读 442

收藏
2020-05-10

共1个答案

一尘不染

简而言之:

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