Question

我的HTML在外部div display: inline-block内有几个内部div，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个div，这正是我想要的。但我的问题是，虽然在Android手机上完全对齐，但div并非在iPhone上居中对齐。

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

但现在在iPhone上：

div略微位于右侧。

我可以做些什么来对齐div？

注1 ：我在问题标题中写了 Android 和 iPhone ，因为我不确定这个问题是否取决于操作系统（ Android与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;
}

如果要在全屏显示1行中的块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 个答案: