我有一个包含两个图像和一个 h1
的 div
。所有这些都需要在 div 中垂直对齐,彼此相邻。其中一张图片需要以 absolute
方式定位在 div
中。
在所有常见浏览器上运行需要什么 CSS?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
最佳答案
哇,这个问题很流行。它基于对 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 - ……还有更多这样的特殊情况。
- 如果内部元素可以有一个固定高度,你可以让它的位置
关于html - 如何垂直对齐div中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25673539/