html+css 网页居中的方法

 

html+css 网页居中的方法

转自 袁宏 阅读次数:1085 2009/1/10 10:18

　好久没动手做过网站了，今天开始做，感觉真是有点生疏。

　　一开始就碰到问题，我要让块级元素（div)head在body中居中，我这样定义CSS

/*body*/
body{
text-align:center;
width:760px;
}

/*head*/
#head{
margin-left:auto;
margin-right:auto;
}

然而得到的结果呢只是#head中的文字居中了，而元素本身依然静静的靠在左边，细细一想，原来错在不应该将body的width属性定义为760px；而是要将#head的width属性定义为760px；因为将body的text-align的属性定义center，它只能是约束它的下一级元素居中，如果不定义#head的宽度，只能让#head在body中保持默认大小，而body本身本没有约束它在页中的位置，所以它只能靠左边站了，找到问题原因，将CSS修改如下

/*body*/
body{
text-align:center;
}

/*head*/
#head{
width:760px;
margin-left:auto;
margin-right:auto;
}
再测试，达到预想效果，OK，搞定！