2010-09-02 80 views
3

我做了一个CSS模板
页面的中心,我希望把它在 页面的中心,当我打开它出现在 页面左边的浏览器 任何帮助,请我怎样才能让我的网站在

+0

感谢所有答案 – john 2010-09-03 18:48:38

回答

12

您需要使用margin:auto与指定width这样的:

#wrapper{ 
    margin:auto; 
    width:1000px; /* adjust width */ 
} 

#wrapper应该是你的页面上的主要容器元素。

+1

这有一个共同的问题,让你居中的div跳到页面之间的左边几个像素取决于滚动条是否激活。一个常见的解决方案在这里给出http://stackoverflow.com/questions/1202425/html-css-making-the-main-scrollbar-always-visible/1202542#1202542 – second 2010-09-02 13:19:48

+0

值得注意的是,这将影响上下边距'#wrapper'也是。 – Armand 2010-09-03 08:52:35

+0

感谢所有答案 – john 2010-09-03 18:48:06

0

用户

body{ 
    margin:0 auto; 
} 
or top root parent id 

#parentid{ 
margin:0 auto; 
} 
+0

身体标记默认为100%宽度。因此,将左右边距设置为自动将无效。 – 2010-09-02 13:47:47

2

得到这个中心得当,包装需要有一组宽度,我们需要将左,右页边距设置为自动。

#wrapper { 
width: 960px; /* set to width of content */ 
margin: 0 auto; 
} 

Sarfraz在右页,但没有理由将顶部和底部边距设置为自动。我们应该只影响获得我们想要的结果所必需的属性。

+0

值得注意的是,这也会影响'#wrapper'的顶部和底部边距。 – Armand 2010-09-03 08:52:55

+0

@Alison,我怀疑Maged目前是在#wrapper的顶部还是底部设置了空白。 – 2010-09-03 12:22:33

0

我的方法与已有的稍有不同,所以这里是我的建议。

div#wrapper { 
    width: 960px; 
    position: absolute; 
    left: 50%; 
    margin-left: -480px; 
} 

其中#wrapper是包含您网站主要内容的div。

margin-left应该等于宽度的一半。

+0

这个解决方案比'margin-left:auto; margin-right:auto;'? – Armand 2010-09-02 14:07:03

+0

这是一个很好的解决方案,用于垂直居中,但是通过绝对定位它将整个包装从标准流程中取出似乎是没有必要的。此外,还有更简单的解决方案,不是黑客。 – 2010-09-02 14:21:56

+0

RE:Brian - 如果你不想把它从流程中拿出来,你可以使用position:relative;那么任何跟随div的东西都会出现在它应该在的位置。这已经很简单了,所以我不会把它定义为黑客。 RE:艾莉森 - 我不认为使用任何一个优势/劣势。这只是我一直这样做的方式,而且它对我一直都有效。 – diggersworld 2010-09-02 14:42:12

0

指定左,右页边距为auto,并设置一个宽度为身体:

body { 
    margin-left: auto; 
    margin-right: auto; 
    width: 780px; 
} 

我选择780px的宽度,但你可以把任何你想要的。在其他单位中指定(例如,%,%)也应该起作用。