如何将布局的“功能”部分完全居中（请参阅链接）？

Question

我使用DIVs / CSS创建了一个布局。我附上了一个示例图片和下面的链接，其中显示了我希望如何组织事物。在标题内，有一个徽标和菜单，累计宽度为1000像素。功能，内容和页脚部分的宽度也应为1000像素。但是，所有部分的实际背景图像宽度为100％，并且水平重复。

以下是我想要做的一个例子：

到目前为止我实际上已经放在一起（就设计而言）可以在这里查看：http://ohachem.com/2/。这就是我想要遵循的。可以在此处查看CSS：http://ohachem.com/2/style.css

实现这一目标的最佳方法是什么？如您所见，“功能”部分中的文本未完全对齐在中心。我尝试过使用clear：both，overflow：hidden，以及其他几种方法，没有运气。

Answer 1

您指向的网站使用流畅的布局，这里有一堆示例：http://www.dynamicdrive.com/style/layouts/category/C13/。

一个注意事项，就你的例子而言，我没有可以辨别的定位属性，使布局响应的很大一部分是确保它在所有浏览器中看起来一致。屏幕。

Answer 2

我会建议您使用CSS3 Media 查询而不是脚本来执行响应式/自适应网页设计。

请查看this

这些不会处理很多，因此轻量级，大多数现代浏览器和设备都支持CSS3 因此方便可靠的选项。 < / p>

Answer 3

“特色”文本的“错位”是由浮动徽标引起的。因为浮动尚未被清除并延伸到标题之外，所以它会导致文本在其周围流动。将overflow: hidden添加到#header元素会更正它，但还有其他方法可以在不添加额外标记的情况下清除浮点数。

或者，您可以使徽标与标题的高度相同。现在，height属性设置为相同的值，但徽标有一些额外的填充，这会导致溢出。