DIV自动换行与垂直居中问题

2006-11-03 08:40:55

在firefox没出来之前,貌似都是用 word-break:break-all;word-wrap:break-word; 来解决问题,其实不是那么回事,使用Editplus编辑的时候 会发现,这些代码没有被高亮。其实这些代码是微软自己发明的而不是W3C标准。 于是开始Google,找到 cnbruse(布鲁斯狼)的DW8(缔吧)上面的一篇关于换行的文章 white-space:normal;//标准中的换行写法 overflow:hidden;//超过宽度自动隐藏,如果设置为Auto则自动滚动条,当然IE无效 word-break:break-all;word-wrap:break-word;//微软还是要用微软的方法 解决问题了?用 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 再测试一下效果和 dddddddddddddddddd 居然不同,前者可以实现了,后者还是老样子 那么在CSS中再加上一句 table-layout:fixed 就可以实现惊叹号的DIV的自动换行了 ////////////////// 垂直居中 [code]<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>垂直居中</title> <style type="text/css"> body, html { height:100%; } #outer { height:100%; overflow:visible; position:relative; } #outer[id] { display:table; position:static; } #middle { position:absolute; top:50%; } #middle[id] { display:table-cell; vertical-align:middle; position:static; } #inner { position:relative; top:-50%; } #inner[id] { position:static; } </style> </head> <body> <div id="outer"> <div id="middle"> <div id="inner"> <p>111111这个在IE中可以实现居中,在Firefox中也可以实现居中1111111<br />#inner[id]是针对Firefox,Opera的hack</p> </div> </div> </div> </body> </html>[/code] [code] <style> #test{ width:100px; height:100px; position:absolute; left:50%;top:50%; margin:-50px 0 0 -50px; background-color:#000 } </style> <div id="test">TestTestTest</div>[/code]