实现CSS制作网页时绝对居中问题的总结!
2008-03-29 17:16
921 查看
实现CSS制作网页时绝对居中问题的总结
[ 来源:网页教学网 | 作者: | 时间:2007-05-29 10:22:50 | 收藏本文 ] 【大 中 小】.Yqk179 { display:none; }
什么叫绝对居中?就是说容器到屏幕左右上下四个方向都有间距,并且随屏幕大小缩放相对不变或者等比例调整,始终居屏幕中间。 绝对居中也有两种情况,容器的绝对大小和相对大小。 同时有很多方法可以实现,总结起来大致如下:
站.长.站
1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)注意不能加声明! 中国站长.站
如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;} 中国站.长站
以下为引用的内容: <table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0"> <tr> <td style="text-align:center;"> <table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122"> <tr> <td></td> </tr> </table> </td> </tr> </table> 站长.站 |
2.利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数: Www.Chinaz.com
以下为引用的内容: <div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;"> </div> Chinaz.com |
3.老外给出的另类方法,巧妙利用display:inline-block;,IE6.0测试通过。(标准)
中国站.长.站
注意1.height:100%是关键:2.edge与container没有嵌套关系: 站.长站
这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。 站.长.站
以下为引用的内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><BR> <title>无标题文档</title> 中国站长.站 <style type="text/css"> <!--body { margin:0; height:100%;} #edge { width:0; height:100%; display:inline-block; vertical-align:middle;}#container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}--> </style> </head> <body> <!-- required for xhtml1.1 validation only --> <span id="edge"></span><span id="container"> <div style="width:200px; height:50px; background:#f00; line-height:50px;">仅IE6.0环境下实现</div> </span> </body> </html> |
4.CSS行为expression控制实现,不过expression为IE独有,并且耗资源严重,尤其在大量使用的时候。(标准)
Www_Chinaz_com
注意关键定义,不要以为height:100%在IE内是没用的:
中国站长_站,为中文网站提供动力
实时获取屏幕高宽值,分别减去容器高宽值再除以2,得到准确坐标绝对定位: 中国.站.长站
以下为引用的内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title><style type="text/css"> Www^Chinaz^com <!--html,body { height:100%;}--></style> </head> <body> <div style="background:#f00; position:absolute; left:expression((body.clientWidth-50)/2); top:expression((body.clientHeight-50)/2);width:50px;;height:50px;"></div> </body> </html> |
5.FF1.5测试通过,绝对定位,边距为比例,此时容器高宽始终为viewport的50%相对大小(标准):
中国站.长.站
以下为引用的内容: <div style="position:absolute; top:0; right:0; bottom:0; left:0; width:50%; height:50%; margin:auto; background:#f00; color:white; line-height:20px; text-align:center;">FF1.5测试通过</div> 中国站长_站,为中文网站提供动力 |
6.FF1.5测试通过,绝对定位,直接定位上下左右,强制边局实现容器相对大小(标准): [中国站长站]
代码:略 Chinaz.com
7.ff1.5 IE5 IE6通过测试 中国站.长.站
以下为引用的内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vertical centering in valid CSS</title> <style type="text/css"> body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;} body,html{height: 100%; } a{color: #333;} a:hover{color: green;} 中国站长_站,为中文网站提供动力 #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; } #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */ div.greenBorder {border: 1px solid green; background-color: #FFF;} p{margin: 1em;} </style> <script type="text/javascript"> // <![CDATA[ function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="outer"> <div id="middle"> 中国站长_站,为中文网站提供动力 <div id="inner" class="greenBorder"> <p><a href="javascript:toggleContent('inner',1)">默认长度</a> <a href="javascript:toggleContent('inner',2)">加长页面</a></p> <p> 1.打开illustrator,新建一个文件,画个矩形,比你要导入的图片大一些,白色填充。 <br /> 2.选中矩形,菜单:Effect > Distort & Transform > Zig Zag,设置如下图。 <br /> 3.菜单:Effect > Stylize > Drop Shadow,设置如下图。 <br /> 1.打开illustrator,新建一个文件,画个矩形,比你要导入的图片大一些,白色填充。 <br /> 2.选中矩形,菜单:Effect > Distort & Transform > Zig Zag,设置如下图。 <br /> 3.菜单:Effect > Stylize > Drop Shadow,设置如下图。</p> Www_Chinaz_com <address style="text-align:center; padding: .5em; clear: left;"> Design by <a href="//www.webjx.com">Webjx</a> 本演示采用<a href="//www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。 </address> </div> </div> </div> <script src="//www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-152060-1"; urchinTracker(); </script> <noscript><p>google-analytics</p></noscript> <script src="//www.webjx.com/*/*.js" type="text/javascript"></script> <noscript><p>stat.</p></noscript> </body> </html> Www@Chinaz@com |
8.利用expression(仅对IE)
站长.站
以下为引用的内容: <div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div> Chinaz.com |
相关文章推荐
- 实现CSS制作网页时绝对居中问题的总结
- 实现CSS制作网页时绝对居中问题
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS实现垂直居中水平居中的绝对定位居中技术
- 使用css属性line-height实现文字垂直居中的问题
- css知识点总结之——实现居中布局
- CSS实现不定高度DIV绝对居中
- CSS垂直居中网页布局实现的5种方法
- CSS网页制作时实现自动换行的小技巧
- DIV遮罩层如何实现_Div+CSS教程_CSS_网页制作
- 寥寥几行CSS:实现某个div在网页中垂直水平居中呢
- CSS:实现某个div在网页中垂直水平居中
- 网页设计-[常用CSS缩写语法总结、标准的N种死法及网页设计必须注意的几个问题 ]
- 关于CSS制作水平/垂直居中对齐问题
- 网页html制作目录文件及CSS命名规范总结
- [收藏]CSS网页制作时实现自动换行的小技巧
- CSS垂直居中网页布局实现的5种方法
- 网页Css+Div排版常见问题总结
- 使用css进行网页排版中遇到的一些问题总结
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术