[求助] 页面内容实现在不同分辨率和不同浏览器下的水平和垂直居中

瑶子 [楼主]

经典瑶子

金牌会员

帖子: 1534
体力: 3184
威望: 0
离线: 1 天

1^# 大中小发表于 2008-8-21 11:31

我下面这段HTML代码在不同分辨率和不同浏览器下的水平和垂直居中,
水平就可以居中,但垂直居中总是测不出来.找了好多资料都不能成功,请教大侠指点下,谢.
在网上找的position:absolute;top:50%;left:50%;margin-top:-(height/2)px;margin-left

width/2)px;和
width:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -200px;
像类似这些方法加了,好像生效不了.加JS的也不行呀.

提示：您可以先修改部分代码再运行

我设计，我热爱
www.fshanxiang.com/fang/index.htm

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

ONEBOYS

步舞之鹤

银牌会员

帖子: 522
体力: 1034
威望: 0
当前: 浙江杭州

专长 前端制作

2^# 大中小发表于 2008-8-21 12:31

事实上用那种方法div层是可以居中的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<style type="text/css">
body{font-family: 宋体,Arial,serif;font-size:12px;margin:0 auto;background: #0E4B96;color:#fff;}
li{list-style-type:none;}
#Main{
	width:978px;
	margin:0 auto;
	height:622px;
         position:absolute;
         left:50%;
         top:50%;
         margin:-311px 0 0 -489px;
        border:1px solid red;	
}
#Left{
	float:left;
}
#Right{
	float:right;
}
#Footer{
	width:957px;clear:both;
}
#Footer li{text-align:left;margin-left:-20px;}
#Footer span {float:right;color:#CCDB1E;}
</style>
<body>
<div id="Main">
   <div id="Left"><img src="images/kjindex_03.jpg" border="0" usemap="#Map" />
</div>
   <div id="Right"><img src="images/kjindex_04.jpg" /></div>
<div id="Footer">
<ul>
<li><span>最佳显示：1024X768分辨率+IE6</span>版权所有</li>
</ul>
</div>
</div>
</html>

提示：您可以先修改部分代码再运行

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

bluechen

新手上路

帖子: 8
体力: 14
威望: 0
离线: 2 天

3^# 大中小发表于 2008-8-21 12:32

你搜到的方法是可以的啊，我就用这种方法

提示：您可以先修改部分代码再运行

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

瑶子 [楼主]

经典瑶子

金牌会员

帖子: 1534
体力: 3184
威望: 0
离线: 1 天

4^# 大中小发表于 2008-8-21 13:51

谢谢两位.我当时加了就不行,有点怪. 现在可以了.

我设计，我热爱
www.fshanxiang.com/fang/index.htm

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

‹‹ 上一主题 | 下一主题 ››