怎样设置DIV绝对居中
我网页是用DIV+CSS样式进行排板的 但是DIV居中不能兼容多个浏览器 我现在是用IE&...
我网页是用DIV+CSS样式进行排板的 但是DIV居中不能兼容多个浏览器 我现在是用IE 火狐 和谷歌 这三个浏览器 IE可以 火狐就不行了 火狐的行了IE的就不能居中的 好不容易 IE和谷歌都行了但是 用火狐测一下又跑乱了 我是在BODY里面加入的DIV 每个DIV的CSS样式都是左对齐 我在BODY和一个大的DIV属性里面都加了这些值〈 style="margin:0 auto; text-align:center; border: solid 1px #cccccc;width:auto height:auto"〉 想请教一下高手 如何才能克服DIV同时兼容这三个这三个浏览器 的绝对居中的问题 还请那位高手指点指点 在我里万分感谢了
展开
6个回答
展开全部
如果用fixed的话,ie6不支持,你干脆用position:absolute;应该是垂直居中吧,就是在任何浏览器中
上下左右都居中如果是那样的话,你可以这样写
div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin:-100px
0
0
-100px;border:1px
red
solid;}
里面的宽高你可以随便设定,但是margin值要是宽高德-1/2,我加了个border,你可以先看一下效果
上下左右都居中如果是那样的话,你可以这样写
div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin:-100px
0
0
-100px;border:1px
red
solid;}
里面的宽高你可以随便设定,但是margin值要是宽高德-1/2,我加了个border,你可以先看一下效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2015-08-10
展开全部
如果元素的宽高固定,那么,css指定样式为top:50%;left:50%;
而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半 ;
参考实例如下:
<!DOCTYPE html>
<html>
<head>
<title> 固定宽高的元素居中示例 </title>
<style>
.content{
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
background-color: #8888CC;
}
</style>
</head>
<body>
<div class="content">
<p>指定页面居中的元素</p>
</div>
</body>
</html>
而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半 ;
参考实例如下:
<!DOCTYPE html>
<html>
<head>
<title> 固定宽高的元素居中示例 </title>
<style>
.content{
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
background-color: #8888CC;
}
</style>
</head>
<body>
<div class="content">
<p>指定页面居中的元素</p>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你的样式有问题啊,宽度必须固定,不然是居中不了的
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
貌似楼主的这个问题不算问题吧
如果你设宽度自适应width:auto 的话,那你就根本就没必要设居中了,因为div默认和自适应都是宽度最大化,既然最大化了自然就没必要设定居中了
如果你要设定居中那就必须给div设定一个宽度,那么margin:0 auto;自然就可以兼容所有浏览器
假如楼主想要的效果是div自适应是div宽度默认最小化,那么我可以给楼主推荐一个简单的方法,那就是把div插入一个table中,记得table不要设定宽度或者100%宽度,因为table默认是宽度高度都最小化,加了margin:0 auto;可以实现居中
至于其他的方法我就懒得推荐了,那些方法太过复杂,
比如设定绝对定位,大部分浏览器是解析成div最小化,但并非全部都兼容,使用ul li也是一样的原因
如果你设宽度自适应width:auto 的话,那你就根本就没必要设居中了,因为div默认和自适应都是宽度最大化,既然最大化了自然就没必要设定居中了
如果你要设定居中那就必须给div设定一个宽度,那么margin:0 auto;自然就可以兼容所有浏览器
假如楼主想要的效果是div自适应是div宽度默认最小化,那么我可以给楼主推荐一个简单的方法,那就是把div插入一个table中,记得table不要设定宽度或者100%宽度,因为table默认是宽度高度都最小化,加了margin:0 auto;可以实现居中
至于其他的方法我就懒得推荐了,那些方法太过复杂,
比如设定绝对定位,大部分浏览器是解析成div最小化,但并非全部都兼容,使用ul li也是一样的原因
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询