我有以下情况:
- 我有一个固定大小的容器。
- 在容器内,我显示了一个比容器大的图像(大小未知)。我想尽可能大地显示图像(但保持纵横比)。我还希望图像在容器中垂直和水平居中(到目前为止一切顺利,我知道该怎么做)
- 现在我想在图像上叠加两个(大小未知):一个与图像的顶部对齐,一个与图像的底部对齐。
我无法正确理解最后一点。如果不清楚,那么希望 this demo应该会有所帮助:我的叠加层与 容器 的顶部/底部对齐。相反,我希望它们与图像对齐。任何帮助表示赞赏!
最佳答案
position: relative
不适用于表格单元格。
来自规范:http://www.w3.org/TR/CSS21/visuren.html#propdef-position
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
因此,添加一个包装器 div
并将 position: relative
应用于它:
<div id="container">
<div> <!-- the wrapper -->
<img id="img" src="http://lh5.ggpht.com/-J7Q7cUDEFOU/S_bKEoyMSzI/AAAAAAAAGIw/PZJduitsVa0/largeNewGoogleLogoFinalFlat-a.png" />
<div class="overlay" id="top">Overlay top</div>
<div class="overlay" id="bottom">Overlay bottom</div>
</div>
</div>
#container > div {
position: relative;
}
关于html - 相对于图像定位 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6712692/