How to center an image that contains absolute elements inside?

Question

How to center an image that contains absolute elements inside ?

I've manage to position absolute elements in the image, but now i want to center the image inside de red container... how?

For example:

enter image description here

HTML

<div id="image">
    <div id="the-image">
        <img src="..." width="..." height="..." alt="">
        <a href="..."><img src="" alt=""></a>
    </div>
</div>

CSS

#image {background-color: red; float: left; width: 660px;}

#the-image {display: inline-block; position: relative;}
#the-image img {}
#the-image a {position: absolute; bottom: 10px; right: 10px;}

CRABOLO · Answer 1 · 2014-03-13T00:57:59.500

1

You could do this

#the-image {
    text-align: center;
    display: block;
}

#the-image img {
    display: inline-block;
}

or this

#the-image img {
    display: block;
    margin: 0 auto;
}

For this to work, you'd need to make sure that your images have a width attribute set.

EDIT :

http://jsfiddle.net/uLX8g/3/

#the-image {
 display: block; /* changed from inline-block to block */
}

#the-image img { 
    display: block; 
    margin: 0 auto;
}

edited Mar 13 '14 at 00:57

answered Mar 13 '14 at 00:35

CRABOLO

8,605
39
41
68

if i use your answer, the absolute elements inside the image container are positioned outside, so it won't work – Marco Mar 13 '14 at 00:40
i did.. and tried it and it doesnt work... Elements inside the image container are outside, they need to be inside, see my image as an example – Marco Mar 13 '14 at 00:44
look at the zoom image at the bottom of the main image... it's outside the image container. It needs to be inside – Marco Mar 13 '14 at 01:01
@Marco Just change the right position `#the-image a {right:60px;}` Fiddle : http://jsfiddle.net/uLX8g/5/ – CRABOLO Mar 13 '14 at 01:03
what if the image size is wider or smaller? The solution needs to be dynamic not static – Marco Mar 13 '14 at 01:05
@Marco Then use %'s instead. – CRABOLO Mar 13 '14 at 01:05
where do i need to use the % ? – Marco Mar 13 '14 at 01:18

score 0 · Answer 2 · edited May 23 '17 at 12:21

ok, after a couple of hours, i've found the solution... how could i have missed it!

The solution is from this other post https://stackoverflow.com/a/4980600/888139

it says: If you have a div with text-align:center;, then any text inside it will be centered with respect to the width of that container element. inline-block elements are treated as text for this purpose, so they will also be centered.

so, i just needed to make the div with the id image text-align center... and that's all.

<div id="image">
    <div id="the-image">
        <img src="..." width="..." height="..." alt="">
        <a href="..."><img src="" alt=""></a>
    </div>
</div>



#image {background-color: red; float: left; width: 660px; text-align: center}

#the-image {display: inline-block; position: relative;}
#the-image img {}
#the-image a {position: absolute; bottom: 10px; right: 10px;}

score -2 · Answer 3 · answered Mar 13 '14 at 05:03

I don't want to make it complicated or whatever. But try this, see if it works.

<div id="image">
   <center>
      <div id="the-image">
           <img src="image.jpg" width="..." height="..." alt="">
            <a href="..."/><img src="" alt=""></a>
         </div>
     </center>
 </div>

This is just in case you need to put everything on centered. :)

How to center an image that contains absolute elements inside?

3 Answers3