Question

我有一个奇怪的问题，我的内容左侧有更多的空间，然后就在右边。该页面为http://travisjterry.com/NuvigilSurvey/treated.html

我不确定我在这里缺少什么。我的标题和部分的宽度为

margin: 0 auto;

我已经尝试将标题和部分放入另一个div以尝试以这种方式对齐，但没有任何运气。

知道我在这里缺少什么吗？

Answer 1

为你的html和body标签添加812px的宽度。

它不居中的原因是因为html和body标签的显式大小小于其中的内容。最内容的内容占812px的宽度，而父元素的容量则设置为700px。因此，所有内容容器都居中，实际内容正在推出，导致它偏离中心。

简单地看到这一点就是右键单击Chrome或FF中的内容元素，然后选择“选择元素”，这将打开一个包含HTML代码的窗格。将鼠标悬停在最内容元素的HTML上，以在屏幕上看到它的盒装轮廓，然后将鼠标移到包含元素上，看看它们的盒装轮廓是否大小相同。

您可能需要考虑在容器类上放置显式宽度，尤其是任何需要边距或填充的宽度，并为其中的元素设置100％的宽度。

Answer 2

问题是由于盒子模型，.wrap的填充正在扩展定义的宽度。

我建议对所有元素使用box-sizing并根据需要调整任何宽度：

* {
    -moz-box-sizing: border;
    box-sizing: border;
}

您可以在此处详细了解该问题：Box-sizing: border-box FTW!

Answer 3

从CSS中删除此规则，由于现代化而影响<html>标记，我认为您并不真正需要它

.audio {
    width: 700px;
    height: 60px;
    margin: 0 auto;
}

Answer 4

您需要做的就是：

html, body {
    width: 100%;
}

瞧，你的section.wrap是居中的。

我使用Chrome的开发者工具在您的实际网站上对此进行了验证...

enter image description here

Answer 5

你有一个固定宽度的.audio类。如果将宽度更改为700px，则会导致布局的其余部分再次居中。

Answer 6

在此处使用其中一些代码：

<meta name="viewport" width="device-width" />

然后第二个是：

html, body {
width: 100%;
height: 100%;
}

但是，我在Chrome中查看了您的网页。它看起来很棒！没问题。