html css wrapper is not center aligned in iphone safari

should be center-aligned website

I have built a website as above link, with wrapper center aligned properly in PC/Mac browsers. However, when running in iphone safari, it is left aligned, but not center aligned.

the wrapper code is:

#wrapper {
width: 939px;
bac开发者_开发技巧kground-color: #fff;
margin: 40px auto 5px auto;
padding-bottom: 50px;

}

Any ideas on it?

Thanks.

have you tryd:

#wrapper{
    text-align: center;
}
#wrapper <yourChildrenId/yourChildrenClass/yourChildrenTag>{
    display: inline-block;
    //or
    display: inline;
}

Mini hack, but if you set meta content width to the widest centered div it forces the iPhone screen to be that wide and doesn't mess the div centering up.

<meta name="viewport" content="width=[widest centered div];"/>

#wrapper{
 width: 939px;
 background-color: #fff;
 margin: 0 auto;
 padding-bottom: 50px;
}

Should do it. I dont know why you need the margin-top.? The provided link doesn't seem to work.

If you only need to support iPhone Safari or CSS3 compatible browsers, here's an elegant approach: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center