Question

我试图让一个带有彩色背景的简单包装div在iPad上居中，从右到左让它亲吻浏览器的两面。我的代码如下。包装器不居中。它从窗口左侧开始10像素。必须有一个简单的答案，但我似乎无法掌握我做错了什么。你能帮忙吗？

<style type="text/css">
   <!--
    body {
        background-color: #FFF;
    }
    #wrapper {
        width:980px;
        height:980px;
        margin-left:auto;
        margin-right:auto;
        background-color:#666666;
    }
</style>

<body>
    <div id="wrapper">
        This is a test
    </div>
</body>

Answer 1

尝试删除＆lt;！ - 这是html中评论的开始标记。我担心这会搞乱css

Answer 2

查看您的css代码，请尝试以下代码：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
    body {
        background-color: #FFF;
    }
    #wrapper {
        width:980px;
        height:980px;
        margin:0 auto;
        background-color:#666666;
    }
</style>
</head>

如果它不起作用，我没有其他想法。：）

Answer 3

<style type="text/css">
    body {
        background-color: #FFF;
        margin: 0;
        padding: 0;
    }
    #wrapper {
        width:980px;
        height:980px;
        margin-left:auto;
        margin-right:auto;
        background-color:#666666;
    }
</style>


<body>
    <div id="wrapper">
        This is a test
    </div>
</body>

您是否遗漏了<!DOCTYPE声明？另外，添加<meta name="viewport" content="" />可获得更好的效果。

Answer 4

我刚才遇到了这个问题 - 旧的Wordpress网站，由于某些原因在iPad上左对齐，没有验证错误，上面包装的标准CSS自动边距如上所述。

使用浏览器重置CSS修复，我使用了Normalize。

980 px包装不以Ipad为中心

4 个答案: