html - 页面未居中

Question

我有一个奇怪的问题，我的内容左侧的空间比右侧的空间多。该页面是http://travisjterry.com/NuvigilSurvey/treatment.html

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

margin: 0 auto;

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

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

score 1 · Accepted Answer

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

我建议box-sizing对所有元素使用 a 并在必要时调整任何宽度：

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

您可以在此处阅读有关此问题的更多信息：Box-sizing:border-box FTW！

score 1 · Accepted Answer

从您的 CSS 中删除此规则，<html>因为modernizr，它会影响标签，我认为您实际上不需要它

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

score 1 · Accepted Answer

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

它不居中的原因是 html 和 body 标签的大小明显小于其中的内容。最里面的内容占用 812px 的宽度，而父元素设置为 700px。所以，所有的内容容器都是居中的，而实际的内容是从里面推出来的，导致它看起来偏离了中心。

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

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

score 1 · Accepted Answer

您需要做的就是：

html, body {
    width: 100%;
}

瞧，您的 section.wrap 居中。

我使用 Chrome 的开发人员工具在您的实际网站上验证了这一点...

在此处输入图像描述

score 0 · Accepted Answer

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

score -1 · Accepted Answer

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

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

然后第二个是：

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

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

6 回答 6