html+css 网页居中的方法

html+css 网页居中的方法

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

一开始就碰到问题,我要让块级元素(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,搞定!

 
 
 

相关推荐