ipad的居中容器答案

【问题标题】：Centering container for ipadipad的居中容器
【发布时间】：2012-10-26 21:32:32
【问题描述】：

我正在尝试找到一种方法将我的 div #container 放在 ipad 页面上。这是一个相当简单的 960 像素宽，边距为 0 的自动作业。正文被赋予了背景颜色，但在 ipad 上，容器仅占据整个页面，或者边距在左侧有效，但页面被卡在右侧边缘。

我在互联网上看到过关于最小宽度、视口等的各种想法。理想情况下，我会在我的样式表中使用@media 查询，因为默认情况下其他一切看起来都很好

谢谢

【问题讨论】：

标签： css ipad

【解决方案1】：

在box model 中，元素的总宽度是其边距、边框、内边距和内容宽度的总和。

容器的总宽度为40 + 960 + 40 = 1040px，而 iPad 视口宽度为 1024 像素。所以你不能居中，你会看到意想不到的结果！

减小容器的宽度或内边距，使其总宽度小于 1024px，width:960px; padding:32px; 例如。

【讨论】：

谢谢，是的，你完全正确，我的计算只是愚蠢 - 但是我发现即使减小各种 div 宽度的大小也可以使容器很好地适合 ipad，它不会让它死心吗？据您所知，这是 Ipad 的事情，还是您认为我的代码中存在一些边距问题？再次感谢
我不知道关于水平居中的任何问题，所以我认为这是由于您的代码。我可以看看吗？
更好，因为iPad和iPhone上的移动Safari支持border-box属性，你可以简单的去； box-sizing：边框框； -webkit-box-sizing：边框框；它会停止填充改变你的宽度。

【解决方案2】：

尝试将DIV的显示属性从默认块更改为inline-block。

div #container {
  display: inline-block;
}

【讨论】：