Website Not Centering Correctly in Horizontal iPhone Orientation
I used CSS to 开发者_如何学运维vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this?
Here is the css I used to center the site:
#wrapper {
width:850px;
height:650px;
position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-425px;
}
And here is the site: http://www.maidmarianmuffins.com/
I need the result to be fully functional i.e. zoom & pinching functions must still work. :)
I would change the #wrapper properties from what you have to
#wrapper {
height: 650px;
margin: 5% auto 0;
position: static;
width: 850px;
}
The static positioning the default of each element, so no problem if don't include it. The margin value 5% represent the margin from top, the auto for the left and right and 0 for bottom.
I made a live example you can find and test it from your iphone here: http://jsbin.com/adino3/3
Have you tried this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr-HR" lang="hr-HR">
<head>
<style type="text/css">
#wrapper {
width:850px;
margin: 0 auto;
}
#wrapper_inner{
width:850px;
height:650px;
position:absolute;
top:50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrapper_inner">
Center me
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论