html - 边缘居中按钮在 ipad 中向左移动

Question

这是我的按钮：

<div id="body">
    <button>Hello</button>
</div>

及其风格：

#body{
    width:400px;
    margin:0 auto;
    background:#eee;
    border:1px solid #ccc;
}
button {
    display: block;
    margin: 0 auto;
}

它居中，但让我们在 ipad 中查看结果：

在此处输入图像描述

它向左移动。

看看这个案例：http: //jsfiddle.net/c2HLe/9/

笔记。 这与我之前的问题类似，但在这种情况下，我使用了一个简单的结构，所以我认为人们可以更好地关注这个问题。

score 2 · Accepted Answer

要使用使按钮居中margin: 0 auto;，您还需要定义按钮的宽度。像这样的东西。

或者，您也可以使用此.

#body{
    text-align: center;
}
 button {
    display: inline-block;
}

在你原来的 CSS 中，如果容器的宽度（margin+border+padding+content width）超过 1024px（iPad viewport width），你会得到意想不到的结果。因此，请务必牢记这一点。

1 回答 1