div中元素的垂直对齐
时间：2020-03-05 18:57:46 来源:igfitidea点击:
我有一个包含两个图像和一个" h1"的div。它们都需要在div内垂直对齐，彼此相邻。
其中一张图片需要在div中"绝对"定位。
要在所有常见的浏览器上运行，需要什么CSS？
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
解决方案
回答
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或者CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
浏览器覆盖率
回答
默认情况下，h1是一个块元素，它将在第一个img之后的行上呈现，并使第二个img出现在该块之后的行上。
要阻止这种情况的发生，我们可以将h1设置为具有内联流行为：
#header > h1 { display: inline; }
至于将img绝对定位在div中，则需要将包含的div设置为具有"已知大小"，然后才能正常工作。以我的经验，我们还需要将position属性从默认位置更改为：relative对我有用：
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
如果可以正常使用，则可能需要尝试逐渐从div.header中删除高度，宽度，位置属性，以获取所需的最少属性，以获得所需的效果。
更新：
这是适用于Firefox 3的完整示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
回答
All of them need to be vertically aligned within the div
对齐方式如何？图片的顶部与文字的顶部对齐？
One of the images needs to be absolute positioned within the div.
相对于DIV绝对定位？也许我们可以勾勒出我们想要的东西...？
fd描述了绝对定位的步骤，以及调整" H1"元素的显示，以使图像与其内嵌显示。为此，我将添加我们可以使用" vertical-align"样式来对齐图像：
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...这会将标题和图像放在一起，并且顶部边缘对齐。存在其他对齐选项；请参阅文档。我们可能还会发现删除DIV并将图像移动到" H1"元素内是有益的，这为容器提供了语义价值，并且不需要调整" H1"的显示：
<h1 id=header"> <img src=".." ></img> testing... <img src="..."></img> </h1>
回答
哇，这个问题很流行。它基于对vertical-align`属性的误解。这篇出色的文章对此进行了解释：
加文·基斯纳(Gavin Kistner)了解"垂直对齐"或者"如何(不)使内容垂直居中"。
如何在CSS中居中是一个很棒的网络工具，可以帮助找到不同情况下必需的CSS居中属性。
简而言之(并防止链接腐烂)：
- 内联元素(仅内联元素)可以通过
vertical-align：middle在上下文中垂直对齐。但是，上下文不是整个父容器的高度，而是它们所在的文本行的高度。jsfiddle示例 - 如果居中元素由单条线组成并且其父级高度是固定的，则可以简单地将容器" line-height"设置为填充其高度。根据我的经验，此方法用途广泛。 jsfiddle示例
- 还有更多这样的特殊情况。
