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

用CSS限定网页宽度,又让一个DIV在网页当中居中,这里需要理解的是一个页面的内容区域,就是body,我们就是通过给body来设置一个宽度,来做限制,至于DIV的居中,首先是需要给这个div一个宽度和高度,然后在使用margin去做,margin的用法,如图:具体的实现看代码: body{ width:960px; //限定网页的...
如何用CSS限定网页宽度,又如何让一个DIV在网页当中居中呢?
margin:0px auto;需要配合<!DOCTYPE 标签使用!也就是要声明代码支持的版本!一般说:

HTML 4.0 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5: <!DOCTYPE HTML>

有时候,你直接写<html></html>这样的标签,有些属性是不支持,特别是在IE系列的浏览器下~~

直接在标签中写属性的方法已经不推荐了!如:<body width="960px">这种写法不错,但是不推荐!

对于页面的宽度一般使用js等脚本控制!当然,css也有相关的属性(min-width,max-width,min-height,max-height),但是,有些浏览器不支持!

假设想要一个页面居中,方法有很多,标准的方法就是margin了~例如:
css中定义一个类属性
.main {width:960px;margin:0px auto;}
html中调用~
<div class="main">居中对齐</div>
<div class="main header">第二个居中对齐</div>

css中类的定义就这么个好处~一次定义,无限使用~

其他的居中方法有js计算(窗口宽度/2 -元素宽度/2就得到了元素距离窗口左侧的距离,这个需要配合window.resize窗口缩放事件并用),text-align(外层元素text-align:center;据中,内部元素继续text-align:left。一般这样的写法是给IE5的~呵呵~),table搞笑法(新建table,三列,100%,中间的td就是绝对居中的)....还有很多,反正说来说去:固定宽度,margin不错~流体宽度js不错~其他的都是扯淡~呵呵

-------------------------------------------------PS------------------------------------
默认情况下,使用div定义一个内容区域,他就是居中对齐的~因为div本身是100%宽度的~

另外,你需要了解一下960 grid。学会框架,样式分离使用~~例如:我会定义一个layout.css文件来放置各种模块的宽度设置,定位设置等布局用的属性,而页面的其他样式,什么背景色,颜色,链接,我会放到一个style.css或者main.css(一般公用的样式放在其中),当然,如果还有其他很多页面样式,我则可以继续新建css去放置!

这样一来,页面调用就好说了:先载入框架,layout.css,然后载入全局样式,main.css,如果这个页面比较特殊,有他自己的样式,则,继续载入该页面的样式,home.css~~

当然layout.css是可以重复使用的~~除此之外,还有reset.css【重置html默认样式】等等....2012-08-08
用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>
2015-06-06
不要在body里面设置例如width、height等值,如果想让div居中,设置body的margin:px;padding:0px;就可以了,然后给div设置你说的margin:0 auto;就可以了;实在不行你可以设置body{margin:0px;padding:0px;position:relative;}然后设置你想剧中的div{position:absolute;top:50%;left:50%;margin:-h(div的高度/2)px 0 0 -w(div的宽度/2)px;}应该就可以了 希望可以帮到你2012-08-22
在你需要剧中的div外层套一层div,将外层div样式调整为:left:50%,绝对定位。然后将你需要剧中的div,绝对定位,left:-50%;

就好了。

上面的比较复杂,是div不定宽的时候用的,如果定宽的话,直接写上宽度,然后margin:0 auto 就行了2014-07-25
上代码2012-08-19
mengvlog 阅读 7 次 更新于 2025-07-19 23:24:55 我来答关注问题0
  •  武汉誉祥科技 怎么样设置网页的长度和宽度呢

    1.首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置,包括IE9,对于那些老式浏览器(主要...

  • 用CSS限定网页宽度,又让一个DIV在网页当中居中,这里需要理解的是一个页面的内容区域,就是body,我们就是通过给body来设置一个宽度,来做限制,至于DIV的居中,首先是需要给这个div一个宽度和高度,然后在使用margin去做,margin的用法,如图:具体的实现看代码: body{ width:960px; //限定网页的...

  •  阿暄生活 css如何设置最小宽度是屏幕宽度 => style="min-width: 屏幕宽度">

    设置最小宽度与最大宽度是CSS中的常用技巧,尤其是当需要使元素自适应屏幕大小时。你提到的情况是,想要设置一个元素的最小宽度为屏幕宽度,而又不能使用百分比来控制。其实,使用百分比是一个很好的解决方案,因为百分比能够根据屏幕宽度自动调整。不过,如果你确实需要使用固定像素值,可以考虑使用媒体查询。

  • 网页的宽度可以通过百分比设定,它会根据屏幕宽度的百分比来确定大小。设置宽度百分比时,首先需要将body的宽度设为100%,这是百分比宽度的参考对象。例如,如果希望将容器的宽度设置为屏幕宽度的50%,则body的宽度应设为100%。实现一屏分为两栏显示,可以使用两个DIV。假设两个DIV的宽度均为50%,则它们...

  •  翡希信息咨询 利用html建立网页怎样利用div调整网页的尺寸?

    方法一:使用CSS设置div的属性样式 定位与尺寸调整:首先确定div的位置,比如居左、居右或居中,然后通过设置width和height属性来调整其宽度和高度。绝对定位:使用position: absolute;可以实现绝对定位,这时可以通过top、left等属性进一步精确调整div的位置。此外,在绝对定位下,还可以通过拖动大小和位置来...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部