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/