页面不居中

-1

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

我不知道我在这里失踪。我有

margin: 0 auto;

我试图把文件头和节到另一个div来尝试对准它的方式，但还没有任何运气对我的头部和区段宽度。

任何想法我在这里失踪？

2013-08-16 Travis

你甚至不会从你的CSS中显示你的选择器。你的HTML是什么？请告诉我们你在做什么。 –

这个问题似乎是无关紧要的，因为它没有包含必要的代码来重现所陈述的问题。 –

从你的CSS删除该规则，它的影响<html>因为modernizr的标签，我不认为你真的需要它

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

2013-08-16 18:01:45

你实际上帮助我解决了这个问题，而不是另一个问题！非常感谢你！ – Travis

@Travis乐于提供帮助。如果您觉得此问题已解决，请考虑点击旁边的绿色复选标记，将其标记为“已接受”。 –

Yepp我早先尝试标记它，但答案必须提前几分钟才能被接受。尽管倒票，我得到了问题，我非常感谢你的帮助。 – Travis

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

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

查看此操作的简单方法是右键单击Chrome或FF中的内容元素，然后选择“选择元素”，该元素将显示带有HTML代码的窗格。将鼠标悬停在内部最内容元素的HTML上，以在屏幕上查看它的盒装轮廓，然后将鼠标移到包含元素上查看它们的盒装轮廓是否大小相同。

您可能需要考虑在容器类中放置明确的宽度，特别是需要边距或填充的宽度，并为其中的元素设置100％的宽度。

2013-08-16 17:59:12 StronglyTyped

问题在于.wrap的填充由于框模型而扩大了定义的宽度。

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

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

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

2013-08-16 18:00:06

所有你需要做的我s：

html, body { 
    width: 100%; 
}

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

我验证了这个在您使用Chrome的开发者工具实际网站...

enter image description here

2013-08-16 18:05:55 hannebaumsaway

-1

使用一些代码在这里：

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

然后第二个是：

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

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

2013-08-16 18:10:22

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

2013-08-16 18:12:03 Giannis

回答