html css 包装器在 iphone safari 中未居中对齐

Question

应该是中心对齐的网站

我已经按照上面的链接构建了一个网站，包装器中心对齐在 PC/Mac 浏览器中正确显示。然而，在iphone safari中运行时，它是左对齐的，而不是居中对齐的。

包装器代码是：

#wrapper {
width: 939px;
background-color: #fff;
margin: 40px auto 5px auto;
padding-bottom: 50px;

}

有什么想法吗？

谢谢。

Answer 1

你尝试过吗：

#wrapper{
    text-align: center;
}
#wrapper <yourChildrenId/yourChildrenClass/yourChildrenTag>{
    display: inline-block;
    //or
    display: inline;
}

Answer 2

迷你黑客，但如果你将元内容宽度设置为最宽的居中 div，它会强制 iPhone 屏幕变得那么宽，并且不会弄乱居中的 div。

<meta name="viewport" content="width=[widest centered div];"/>

Answer 3

#wrapper{
 width: 939px;
 background-color: #fff;
 margin: 0 auto;
 padding-bottom: 50px;
}

应该做。我不知道你为什么需要边距顶部。？提供的链接似乎不起作用。

Answer 4

如果您只需要支持 iPhone Safari 或 CSS3 兼容浏览器，这里有一个优雅的方法： http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center