Question

我使用CSS垂直居中我的网站，但是当在iphone上以水平模式查看时，该网站被切断而不是居中。我该如何解决这个问题？

以下是我用来居中网站的CSS：

#wrapper {
width:850px;
height:650px;

position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-425px;
}

这是网站： http://www.maidmarianmuffins.com/

我需要结果才能完全正常工作，即缩放＆amp;捏功能必须仍然有效。：）

Answer 1

我会将您所拥有的#wrapper属性更改为

#wrapper {
    height: 650px;
    margin: 5% auto 0;
    position: static;
    width: 850px;
}

静态定位每个元素的默认值，所以如果不包含它就没问题。边际值5％表示从顶部开始的边距，左边和右边的自动边距和底部为0。

我做了一个实例，你可以在这里找到并测试你的iphone：http://jsbin.com/adino3/3

Answer 2

你试过这个：

<!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>

网站在横向iPhone方向上无法正确定位

2 个答案: