Question

I have the following HTML code:

    <div id="inner">
    <div id="wrap">
      <img src="images/thumb/3.jpeg"/> 
      </div>
 </div>

And the following style applied to it:

body{

    background:url(pattern/pattern1.png);
}
#inner{
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;
}

#wrap{

    width:50%;

    margin:0 auto;

}

The problem is that the image it always stay top-centered in inner div but i want it to be in center of wrap

!————————————————————————–
Still same problem and heres the code in jsfiddle: http://jsfiddle.net/RNhvz/

Answer 1

You should apply the margin to the image element directly: JSFiddle example1