Website Not Centering Correctly in Horizontal iPhone Orientation_问答_开发者

Website Not Centering Correctly in Horizontal iPhone Orientation

开发者 https://www.devze.com 2023-02-02 17:13 出处：网络

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?

相关专题：css

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>