为什么我的网站没有以移动设备或 ipad 的页面为中心？答案

【问题标题】：Why is my site not being centered on the page on mobile or ipad?为什么我的网站没有以移动设备或 ipad 的页面为中心？
【发布时间】：2015-02-14 06:13:36
【问题描述】：

我的测试网站在计算机浏览器上看起来不错，但在 iPhone（我假设是其他移动设备）上，它并没有使内容或背景居中。在 iPad 上，它不是以背景为中心，而是以内容为中心。

这是我的 CSS 的一部分：

body {
    background-image:url(../images/background.jpg);
    background-color:#000;
    background-repeat:repeat-y;
    background-position:center top;
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
}

#container {
    width:1000px;
    margin:auto;
    overflow:hidden;
    padding: 0;
}

#header {
    height:145px;
}

#nav {
    height:50px;
    margin-bottom:15px;
}

#main-home-left {
    width:550px;
    background-image: url('../images/text-bkgd1.png');
    background-repeat:repeat-y;
    background-size: 650px auto;
    float:left;
    padding: 10px 50px 0 50px;
    text-align:center;
    min-height: 400px;
}

#main-home-right {
    width:300px;
    float:left;
    padding: 10px 25px 10px 25px;
    text-align:center;
}

【问题讨论】：

标签： css mobile tablet centering

【解决方案1】：

这是因为您的#social div。实际上它也不是在桌面中居中。如果你看底部，你可以看到卷轴。你的社交 div 有相对的，但它没有宽度属性，现在是 1000px。简单地向右溢出。所以你可以给你的#social div 一个width 值，或者你可以给你的#header div overflow:hidden; 属性。我希望我表达自己。对不起我的英语:)

【讨论】：