Div中心在Android上对齐，但不在iPhone上

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

这是我最小的和可验证代码：

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

如果改变窗口的大小，你会看到的div重新定位（SO片断是相当小的，看看这种行为，但您可以单击“整页”并调整窗口大小）。

我的问题：

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

使用上面的代码，这是导致Android手机，你可以看到白色的利润率都在同左，右：

但现在在iPhone上：

div的位置稍微偏右。我能做什么来居中对齐它？谢谢。

注1：我写的Android和iPhone在问题的标题，因为我不知道，如果这个问题依赖于SO（Android和IOS），或在浏览器上（移动铬VS移动Safari浏览器）。我不认为这是一个野生动物园问题，因为iPad和MacBook上的div都可以。

注2：它可能不是一个“对齐”问题：在iPhone上，它就像div没有“压缩”以适应屏幕。

来源

2016-07-07 Gerardo Furtado

似乎是块比视口更宽。是。块的宽度为320像素，边距为4px。 – madhushankarox

将宽度设置为a而不是固定的像素宽度 – ca8msm

可以将块宽度设置为100％并删除边距。如果您确实需要填充，请将4px填充添加到容器。 – madhushankarox

，如果你想显示在块3在你的脑袋标签从你的CSS添加此，

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

删除div.container

更改块css来

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

时间在全屏1排：

<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>

来源

2016-07-07 14:29:17 Aman

问题是，如果我这样做，我放松了我的利润。如果您运行代码段并单击“整页”，则桌面视图必须与您拥有的完全一致。 –

你的意思是你不希望块在桌面模式下占用100％的屏幕？在这种情况下，您可以将宽度设置为您的要求，或者如果您只需要边距..您只需将边距添加到.block类中即可。或尝试将高度更改为最小高度：100vh;并看看这是否符合你的要求。 – Aman

是的，这是正确的：在桌面模式下，容器的最大宽度为1000px，块会显示出来（在这种情况下为3），并在它们之间留有余量。 –

Div中心在Android上对齐，但不在iPhone上

回答

相关问题