如何用CSS限定网页宽度,又如何让一个DIV在网页当中居中呢?

html-css018

如何用CSS限定网页宽度,又如何让一个DIV在网页当中居中呢?,第1张

用CSS限定网页宽度,又让一个DIV在网页当中居中,这里需要理解的是一个页面的内容区域,就是body,我们就是通过给body来设置一个宽度,来做限制,至于DIV的居中,首先是需要给这个div一个宽度和高度,然后在使用margin去做,margin的用法,如图:

具体的实现看代码:

<html>

<head>

body{

width:960px       //限定网页的宽度

}

#div1{

width:200px

height:600px

margin:0 auto 

boreder:1px solid #f00     //加个边框利于观察

}

</head>

<body>

<div id='div1'>

我会居中

</div>

</body>

</html>

网页里面的宽度是可以用百分比决定的,可以设置这个容器的宽度占屏幕宽度的百分之多少,但是因为百分比的宽度是要有参考对象的,所以在设置百分比的宽度时,要先设置body的宽度为100%。

照你的要求:一屏分为两栏显示,那么用两个DIV来做,一个DIV的宽度就是50%,两个在一起就正好100%了,如果你想这两个DIV之间有间距,那么就设置宽度为48%就行,具体自己把握,然后设置左边的DIV左浮动,右边的DIV右浮动即可。

高度是可以设置固定像素的,比如一个div的宽度为48%,高度为50px都行的,可以混用,只要记住使用百分比定义宽高长度就要设置对应的body的宽高为100%就行了