Div在Android上居中对齐，但在iPhone上居中对齐

Question

我的HTML有几个带display: inline-block内部div display: inline-block在带有text-align: center;的外部div内的display: inline-block text-align: center; 。 这是预期的行为：在大屏幕上，一些div将并排显示（多少取决于每个内部div和外部div的大小），并且集合将居中对齐。 当屏幕宽度变窄时，div将重新定位，在智能手机的小屏幕中，每行只有一个div，居中对齐。

这是我的MCVE：

 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Align center</title> <style type="text/css"> body { background-color: white; } div.container { margin: auto; max-width: 1000px; text-align: center } div.block { margin: 4px; display: inline-block; width: 320px; height: 400px; background-color: green; } </style> </head> <body> <div class="container"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> </body> </html>

如果更改窗口的大小，则会看到div的重新定位（SO代码段很小，无法看到此行为，但是您可以单击“整页”并调整窗口的大小）。

我的问题：

在智能手机中，每行只有1格，这正是我想要的。 但是我的问题是，尽管在Android手机上完全对齐，但div在iPhone上并未居中对齐。

使用上面的代码，这是Android手机中的结果，您可以看到左右的白色边距相同：

但是现在在iPhone上：

div稍微位于右侧。

我该怎么做才能使div居中对齐？

注1 ：我在问题的标题中写了Android和iPhone ，因为我不确定这个问题是否取决于操作系统（Android vs iOs）还是浏览器（移动Chrome和移动Safari）。 我认为这不是Safari的问题，因为在iPad和MacBook上div可以正常使用。

注意2 ：可能不是“对齐”问题：在iPhone上，好像div没有“压缩”以适合屏幕。

Answer 1

将此添加到您的头部标签中，

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

从CSS移除div.container

将块CSS更改为

.block {
    width: 100%;
    height: 400px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-content: center;
}

如果要一次以全屏显示第3块：

<div class="container">
    <div class="col-lg-4">
      <div class="block"></div>
    </div>
    <div class="col-lg-4">
      <div class="block"></div>
    </div>
    <div class="col-lg-4">
      <div class="block"></div>
    </div>
  </div>

Div在Android上居中对齐，但在iPhone上居中对齐

问题描述

1 个解决方案

解决方案1
2 2016-07-07 14:29:17

Div在Android上居中对齐，但在iPhone上居中对齐

问题描述

1 个解决方案

解决方案1 2 2016-07-07 14:29:17

解决方案1
2 2016-07-07 14:29:17