【发布时间】：2012-05-18 15:43:37
【问题描述】：
我一直在建立网站http://orion.viperdmc.com。除了在 iPad 上运行的 Safari 之外，该布局似乎在所有浏览器上都能正常工作。
在该浏览器上，如果我调整页面大小以使顶部的大图像适合 iPad 显示器，则下面的内容将显示为左对齐而不是居中。
有人知道为什么会这样吗？
【问题讨论】：
【发布时间】：2012-05-18 15:43:37
【问题描述】：
好的，我认为您可以通过将标记中第一个容器的宽度与图像 (#feature-image-inner) 匹配来修复它：
所以在你的标记中的第一个.container 中添加一个.first 类：
<div class="container first">
然后使用下面的 CSS 定位它。
.container.first{
width: 1280px;
}
【讨论】：
-
您能详细说明一下吗？这不会改变我内容的宽度吗？我不想改变其他内容的宽度。
-
您可以在桌面上模拟该问题。缩小窗口，直到只显示没有边距的文本。您仍然可以向右滚动以查看图像的其余部分，并且文本似乎是左对齐的，即与 ipad 上的布局相同，但您必须滚动才能看到它。目前，没有出现滚动条的页面的最小宽度将为
1280px，因为您已将其设置为#feature-image-inner。因此，您只需更改第一个.container以匹配该宽度，使其不会缩小。内在内容不会增长。它看起来一样并保持居中。试试看，让我知道。 -
你完全正确。这修复了它，它在 PC 上看起来仍然正确。然而，我仍然对此感到有些困惑。为什么只修复第一个包含使其适合随后的容器？
-
其实，没关系。看起来我错过了一个结束
</div>标记，因此所有其他内容都包含在第一个容器中。所以它之所以有效，是因为有一个外部容器，这是无意的。我需要稍微修改一下。谢谢！