Dreamweaver(DW)中的div层居中主要就靠css样式{margin:0 auto}，让整个页面居中。
下面是代码案例 <meta ; charset=utf-8" />无标题文档<style type=text/css>{margin:0 auto}#Layer1{border:1px solid #ff0000;width:300px;height:400px;}#layer2{width:200px;height:100px;border:1px solid #ffff00;}</style><body>
代码效果如下： 为了能够方便区分效果，所有表格和层都用了边框颜色来区分 起决定性作用的代码如下图 。 2 DW里,如何把文字及DIV外盒向下居中注：（整体）、我写的代码如
<div class="page_speeder_2044970034">；我们的</div>
margin负值是根据你div的宽除以2，高除以2
3 如何在一个div中使文字居中显示
由于div 是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。
设置文字的padding，使其达到居中的效果。、
在文字外层，div内包裹一个
标签，
只是一段文字
并将p标签的大小设置的与div标签同样大小。再对p标签应用vertical-align :middle属性。
具体如下：
div{
width:200px;height:200px； /设置div的大小/
border:1px solid green； /边框/
text-align: center； /文字水平居中对齐/
line-height: 200px； /设置文字行距等于div的高度/
overflow:hidden;
}
4 Dreamweaver里怎么让div里的文字垂直居中
如果垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素
参考下列HTML代码：
<!DOCTYPE HTML> <html> <head> <meta ; charset=utf-8" /> <meta , body { height: 100%; margin: 0; padding: 0; } body { position: relative; } #div { background: blue; color: #fff; position: absolute; top: 50%; left: 50%; height: 240px; width: 240px; margin: -120px 0 0 -120px; } --></style> </head> <body> <div id="div"> i'm Mr zzllrr </div> </body> </html>；如果居中元素高度可变，这就需要额外的一个wrapper元素，用table-cell的方式来模拟表格的居中实现
具体请参考下列代码：
<!DOCTYPE HTML>
<html>
<head>
<meta ; charset=utf-8" />
<meta , body {
height: 100%;
margin: 0 auto;
padding: 0;
}
body {
position: relative;
display: table;
}
#wrapper {
display: table-cell;
vertical-align: middle;
text-align: middle;
}
#div {
background: blue;
color: #fff;
}
html #wrapper, +html #wrapper {
position: absolute;
top: 50%;
}
html #div, +html #div {
position: relative;
top: -50%;
}
--></style>
</head>
<body>
<div id="wrapper">
<div id="div">
i'm Mr zzllrr
i'm Mr zzllrr
i'm Mr zzllrr
</div>
</div>
</body>
</html>
5 dw怎么让DIV居中,是在源代码里写代码,还是在DIV套用的CSS里写
<div class="page_speeder_1764611950">；哈尔滨</div>；文字水平zd垂直居中回
<div ><div >；我是答</div></div>
div 背景 水平并且垂直居中
一、
<style>
#div1{
position:absolute;
width:100px
height:50px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-25px;
}
</style>
<body>
<divid="div1"></div>
</body>
二、
<script>
functionset_div2(obj){
with(objstyle){
left=documentbodyoffsetWidth-parseInt(width);
top=0;
}
</script>
<body>
<divid="div2"onload="set_div2(this)"></div>
</body>
以下为让div显示在浏览器正中间的样式<style
type="text/css">
#centerdiv
{
position:absolute;
<!--这个属性是设置div以绝对位置显示-->
top:50%;
<!--在离顶部50%的位置显示-->
left:50%;
<!--在离左边50%的位置显示-->
margin:-150px
0
0
-100px;
<!--这个设置大家开始一看，可能觉得好像不是很明白，在下面为大家详细讲解-->
width:300px;
height:200px;
background:black;
}
</style>
相信大家最不明白就是在margin:-150px
0
0
-100这个属性上面，在不设置这个属性的时候,这个div的x坐标为内容显示部分的50%，y坐标为内容显示部分的50%，显示出来的然而这样的话只能说这个div的起点是在正中间，我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中了，在设置margin-top:-100px;是同样的道理，会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）