我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐，彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作，需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
当前回答
所有这些都需要在div中垂直对齐
对齐的如何?图片的顶部与文字的顶部对齐?
其中一个图像需要在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>
其他回答
我的技巧是在div里面放一个表，一行一列，设置100%的宽度和高度，属性vertical-align:middle:
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
小提琴: http://jsfiddle.net/joan16v/sbqjnn9q/
默认情况下，h1是一个块元素，将在第一个img之后的行上呈现，并将导致第二个img出现在块之后的行上。
为了阻止这种情况发生，你可以将h1设置为内联流行为:
#header > h1 { display: inline; }
至于绝对定位img在div中，你需要设置包含div的“已知大小”，这样才能正常工作。在我的经验，你还需要改变位置属性从默认位置:相对工作为我:
#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>
使用display flex，首先你需要包装你想对齐的项目的容器:
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
然后在我的例子中应用下面的CSS内容来包装div或outdiv:
.outdiv {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
浏览器覆盖
