将div放在居中图像的顶部

Question

我有一个看起来像这样的标记：

<div style="width: 150px; height: 250px;">
    <img src="Image1.jpg" />

    <div class="YellowExclaimIcon iconsBlack"></div>
</div>

我要实现的目标如下：

这意味着图像应始终位于父div的中心（水平和垂直），警告图标应位于图像顶部，右边和底部的边距为5。

另外要注意的是，图像的宽度和高度并不总是相同的，但是警告图标的位置应始终位于正确的位置。

YellowExclaimIcon类包含背景图像，但是可以根据需要更改为图像。要考虑的是图像还具有最大宽度和最大高度。

我尝试了此线程CSS帮助中的答案-图像上的div，但无法使其与居中一起使用。

Answer 1

如果图像的宽度和高度是可变的，则只有更改标记才能实现此目的，如下所示：

<style type="text/css">
    div.container {
        width:150px; height:250px; display:table-cell; vertical-align:middle; 
        text-align:center; background-color:#ededed}
    div.image {
        position:relative; display:inline-block; }
    div.image img {
        display:block; }
    div.YellowExclaimIcon {
        position:absolute; width:80px; height:80px; bottom:5px; right:5px; 
        background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>

<div class="container">
    <div class="image">
        <img src="Image.jpg" alt="" />
        <div class="YellowExclaimIcon"></div>
    </div>
</div>

上面的示例将始终在水平和垂直方向上将图像居中对齐，并在右下角带有一个5px的空白图标。

检查工作示例：http : //jsfiddle.net/Q9uhV/