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
精彩评论