Place div on top of image that is centered

Question

I have a markup that looks like this:

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

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

What I want to achieve is below:

Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.

Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.

The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.

I tried with the answer in this thread CSS Help - div over image but I could't get it to work with the centering.

Answer 1

if the image width & height are variable, you can only achieve this if you change the markup, something like this:

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

The sample above will always horizontally & vertically align the image in the center, with an icon in the bottom right corner, 5px margin.

Check a working sample: http://jsfiddle.net/Q9uhV/

Answer 2

Use position:relative to outer div and absolute to inner 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

You need to use z-index and some positioning like this:

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

..for example, set your margins to what you need.

Answer 4

Make your warning image absolute so you can position it over the other image at a specified location.

HTML:

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

CSS:

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

See this jsFiddle for a demo.