如何用CSS限定网页宽度,又如何让一个DIV在网页当中居中呢?
发布网友
发布时间:2022-04-06 11:42
我来回答
共5个回答
热心网友
时间:2022-04-06 13:11
用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>
热心网友
时间:2022-04-06 14:29
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默认样式】等等....
热心网友
时间:2022-04-06 16:04
不要在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;}应该就可以了 希望可以帮到你
热心网友
时间:2022-04-06 17:55
在你需要剧中的div外层套一层div,将外层div样式调整为:left:50%,绝对定位。然后将你需要剧中的div,绝对定位,left:-50%;
就好了。
上面的比较复杂,是div不定宽的时候用的,如果定宽的话,直接写上宽度,然后margin:0 auto 就行了
热心网友
时间:2022-04-06 20:03
上代码
如何用CSS限定网页宽度,又如何让一个DIV在网页当中居中呢?
用CSS限定网页宽度,又让一个DIV在网页当中居中,这里需要理解的是一个页面的内容区域,就是body,我们就是通过给body来设置一个宽度,来做限制,至于DIV的居中,首先是需要给这个div一个宽度和高度,然后在使用margin去做,margin的用法,如图:具体的实现看代码:<html> <head> body{ width:960px; ...
怎样使div居中到网页的中间?
如何让DIV层在网页中居中显示1、在DIV标签对中写入的正文标签的HTML中div/div。然后我们将div设置为宽高度,我们需要注意的是,如果您不设置默认值的宽度为100%哦,所以它将填充整个页面。2、首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0auto,这样即可让对应div水平...
在CSS中如何设置网页的宽度,并且让网页在屏幕的中间。
网页里面的宽度是可以用百分比决定的,可以设置这个容器的宽度占屏幕宽度的百分之多少,但是因为百分比的宽度是要有参考对象的,所以在设置百分比的宽度时,要先设置body的宽度为100%。照你的要求:一屏分为两栏显示,那么用两个DIV来做,一个DIV的宽度就是50%,两个在一起就正好100%了,如果你想这两...
css中如何定义网页宽度和位置。
1、首先打开hbuilder软件,新建一个html文件,写入一个p标签,里面写入一句话:2、然后在上方定义style标签,修改body标签的样式,这里用width属性设置body的宽度为600像素,高度设为1000,居中使用margin属性,最后为了观察效果最后在设置一个宽度为10像素的边框并给边框一个颜色:3、最后按下Crtl+S保存,...
如何让div中的div居中?
让div中的div居中可以通过CSS的margin属性或flexbox布局实现。1. 通过CSS的margin属性实现居中 这是一种常见的方法,主要通过设置左右margin为auto来实现。首先,给内层的div设置一个宽度,然后将其左右margin设置为auto,这样浏览器会自动计算左右两侧的空间,使div水平居中。例如:css .inner-div { width...
如何让一个div居中 CSS怎样让一个div居中
1、新建一个html文件,命名为test.html,用于讲解CSS怎样让一个div居中。2、在test.html文件中,使用div标签创建一个模块,用于测试居中效果。3、在test.html文件中,设置div的class属性为test,下面将通过该class属性设置其css样式。4、在test.html文件内,编写<styletype=text/css></style>标签,页面...
css如何让div页面居中css怎样让div居中
几种居中CSSdiv的方法 CSS实现div垂直居中的方法有很多。下面这些使div居中的方法在编写网页时经常用到,最常见的例子就是登录注册弹出框。方法一:使用绝对布局位置:absolutefordiv并设置top、left、right、bottom的值相等,但不一定都等于0;并设置边距:自动。方法二:这个方法需要知道div的宽度和高度。使用...
在网页制作中如何控制DIV居中显示,用CSS怎么控制背景图片大小?
absolute;},可以控制div显示的位置。你还可以设置浮动div{float:left;}或者是div{float:right;}来控制div居中显示,因为一个div框中如果设置浮动的话可以嵌套两个div框(一个left一个right),l不过需要嵌套多个div框(每个div的宽度自己调,总会让div居中的),但是这个方法比较愚笨。
html整个网页居中(html页面居中对齐怎么设置)
html中如何让一整个网页居中?1、打开HTML的编辑器。找到需要居中的图片或者文字。在body里面,设置CSS样式。添加样式为:text-align:center;即可。超文本标记语言(HyperTextMarkupLanguage),缩写为HTML,标准通用标记语言下的一个应用。2、使用CSS语法要设定一个div水平置中,是很常见到的需求,最多人...
想让一个div竖直居中在网页中央,怎么做呢
1、举例:2、写一个div,并且设置class名为aa,赋予它css属性:width:0;height:0;position:fixed;left:50%;rigth:50%;top:50%;bottom:50%;3、在.aa中放置一个div,并且设置class名为aaa,赋予它必要的css属性:width:600px;height:220px;margin-left:-300px;margin-top:-110px (这里的各个...