将div放在居中的图像顶部

Question

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

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

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

我想要实现的目标如下：

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

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

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

我尝试了这个帖子CSS Help - div over image中的答案，但我无法让它与中心一起工作。

Answer 1

如果图像宽度＆amp; height是可变的，只有更改标记才能实现这一点，如下所示：

<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>

上面的示例将始终水平＆amp;将图像垂直对齐在中间，右下角有一个图标，5px边距。

检查工作样本：http://jsfiddle.net/Q9uhV/

Answer 2

将position:relative用于外部div，将absolute用于内部div

<强> HTML

    <div class="outer">

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

<强> CSS

 .outer{
  width: 150px; height: 250px; 
  border:solid red 1px;
  position:relative;
  vertical-align:middle;
  background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{  
  position:absolute;
  width:100%;
  height:100%;
  top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}

<强> DEMO

Answer 3

你需要使用z-index和一些这样的定位：

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

    <div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>

..例如，将您的边距设置为您需要的。

Answer 4

制作警告图像absolute，以便将其放置在指定位置的其他图像上。

HTML：

<div class="container">
  <img src="penguin.png" />
  <img class="warning" src="warning.png" />
</div>

CSS：

.warning {
  position:absolute;
  left:80px;
  top:80px
}

请参阅this jsFiddle了解演示。