HTML/CSS内容始终居中

Question

如何将页面内容集中在一起,使其以每种屏幕尺寸为中心？例如,在Allegorithmic上,如果我调整浏览器大小,中心内容将向左移动,直到它到达浏览器窗口.某些背景元素无限水平延伸(顶部为深灰色,中间为浅灰色等).我可以在我的笔记本电脑和iMac上打开这个网站,它是居中的.我想我可以使用绝对定位从左侧移动内容x像素数量,但这不起作用,因为在小屏幕上将内容居中的300像素不会将其放在大屏幕上.

因此,本质上我想复制Allegorithmic网站的功能,具有水平无限的背景,但具有始终保持"居中"的某些内容.

Answer 1

如果您希望元素始终居中,请使用margin: 0 auto;其中的样式.

#yourElement{
    margin: 0 auto;
} 

W3.org使用CSS集中事物的参考

要获取背景元素以扩展整个页面长度,只需给它们100%的宽度,然后在其中创建一个子容器并给它们与上面相同的样式.我敢打赌你给出的例子就是使用1px高度的线条来获得背景上的外观.

例

图像bg的示例

标记

<div id="background">
    <div id="content">
    </div>
</div>

CSS

#background{ 
    width: 100%;
}
#content{  
    width: 960px;
    margin: 0 auto;
}