注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦与见

天空擅长,与世人分享寂寞。

 
 
 

日志

 
 
关于我

释寻,原名熊蕾。诗人,摄影师,设计师,网络工程师。 现居武汉。热衷艺术。 爱好诗文、音乐、美术、影视、IT等。 擅长写诗,绘画,摄影,平面设计,书刊排版,视频编辑,音频处理,网络建设等。

网易考拉推荐
 
 

CSS解决未知高度的垂直水平居中自适应问题(转载)  

2010-08-28 19:01:38|  分类: 整理收藏 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、如何让一个DIV水平居中?

这个简单不作过多说明!

 程序代码

<style>

body { text-align:center}

#info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF}

</style>

</head>

<body>

<div id="info">this is test.</div>

</body>

 HTML代码

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
body { text-align:center}
#info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF}
</style>
</head>
<body>
<div id="info">this is test.</div>
</body>
</html>

二、DIV已知高度,如何让他水平加垂直居中?

如果想水平加垂直居中的DIV已知高度和宽度,是最好办的了!

1、先让这个DIV绝对定位;

2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;

3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽的一半就可以了,也就是200PX; 向上呢也同理;

 程序代码

<style>

#info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;}

</style>

<div id="info">this is test.</div>

 HTML代码

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
#info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;}
</style>
</head>
<body>
<div id="info">this is test.</div>
</body>
</html>

三、DIV不知道高度怎么让他水平和垂直居中?

这个比较麻烦,用上边的方法的一半再加一些代码才能实现! 

首先我先按上边代码意思接着写,注意,下边的代码是我写好的第一步,只支持IE6和IE7,不过先看一下!

 程序代码

<style>

body {padding:0; margin:0; }

#infoBox{ position:absolute; top:50%; width:100%; text-align:center;}

#info{position:relative; top:-50%; right:0; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/

</style>

<div id="infoBox">

 <div id="info">

  this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />

 </div>

</div>

 HTML代码

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
body {padding:0; margin:0; }
#infoBox{ position:absolute; top:50%; width:100%; text-align:center;}
#info{position:relative; top:-50%; right:0; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/
</style>
</head>
<body>
<div id="infoBox">
 <div id="info">
  this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />
 </div>
</div>
</body>
</html>

那么,如果让Firefox再支持一下就可以,对吧!所以接着写!

标准浏览器可将父级元素显示方式设定为display: table;,内部子元素设为display:table-cell 和vertical-align;使其垂直居中,但非标准浏览器是不支持;也就是说这样设完后IE6是不支持的,但FIREFOX和IE是支持的;

我用的是最笨的办法,从上往下一级级覆盖;  

 程序代码

<style>

body {padding:0; margin:0; }

/*这些是专用FIREFOX写的,注意IE7也认识*/

html,body{ height:100%;}

#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}

#info[id]{ display:table-cell; vertical-align:middle;} /*这里可以指个宽度试试,是可以自适应的*/

/*专为IE6写的*/

*html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}

*html #info{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/

/*这理是专用IE7写的,注意[id]要加上,不然优先JI没有最上边那段NB*/

*+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}

*+html #info[id]{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/

</style>

<div id="infoBox">

 <div id="info">

   this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />

 </div>

</div>

</html>

 HTML代码

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
body {padding:0; margin:0; }

/*这些是专用FIREFOX写的,注意IE7也认识*/
html,body{ height:100%;}
#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}
#info[id]{ display:table-cell; vertical-align:middle;} /*这里可以指个宽度试试,是可以自适应的*/

/*专为IE6写的*/
*html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*html #info{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/

/*这理是专用IE7写的,注意[id]要加上,不然优先JI没有最上边那段NB*/
*+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*+html #info[id]{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/
</style>
</head>
<body>
<div id="infoBox">
 <div id="info">
   this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />
 </div>
</div>
</body>
</html>

这时你又会发现,在IE和FIREFOX中怎么效果不一样呢?FIREFOX中没有那个边框;对的…… 如果你看一下info这个DIV,他其它是占高度100%的;这时的同一个布局在不同的浏览器是展示出来隐在效果已经完全不一样了;那么怎么办? 所以,再用最后一个办法;再加一个空的DIV就行了,我起了个好名字,叫tnnd; 最后的效果如下;

 HTML代码

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
body {padding:0; margin:0; }

/*这些是专用FIREFOX写的,注意IE7也认识*/
html,body{ height:100%;}
#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}
#info[id]{ display:table-cell;vertical-align:middle;} /*这里可以指个宽度试试,是可以自适应的*/

/*专为IE6写的*/
*html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*html #info{position:relative; top:-50%;   text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/

/*这理是专用IE7写的,注意[id]要加上,不然优先JI没有最上边那段NB*/
*+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*+html #info[id]{position:relative; top:-50%; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/

#tnnd{ border:1px solid red; width:500px; margin:0 auto; font-size:12px; line-height:1.8;}
</style>
</head>
<body>
<div id="infoBox">
 <div id="info">
   <div id="tnnd">
   <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br />
  <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a><br /> 
  </div>
 </div>
</div>
</body>
</html>

后边这种是最麻烦的,重点在于IE67和FIREFOX中间的差别和他们相互之间是如何的一些关系;我看过很多关于这个问题的解决方法,都不是特别的理想,希望这种方法能解决大部分的问题!


相关资料可参考:
1、CSS解决未知高度垂直居中 -- 垂直居中方面可参考一下[/url]
2、[url=http://www.zishu.cn/blogview.asp?logID=772]CSS作的小灯笼效果 -- hack方面参考


转载请注明出处:子鼠 http://www.zishu.cn/blogview.asp?logID=818
  评论这张
 
阅读(22)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017