我有一个带有两个图片和一个h1
的div。所有这些图片都需要在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>
默认情况下,h1是一个块元素,将在第一个图片后的一行呈现,并将导致第二个图片出现在块元素后的一行。
为了阻止这种情况的发生,你可以将h1设置为内联流行为。
#header > h1 { display: inline; }
至于将图片绝对定位在div*内,你需要将包含的div设置为"已知大小",这样才能正常工作。 根据我的经验,你还需要改变默认的position属性--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>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}