我有一个带有两个图像和一个 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 absolute
并指定它的height
,margin- top
和 top
位置。 jsfiddle example line- height
填充其高度。根据我的经验,这种方法非常通用。 jsfiddle example https://stackoverflow.com/questions/79461/