CSS DIV设计实例实现让多个DIV排列时居中
| 代码如下 | 复制代码 |
| <?xml version="1.0" encoding="iso-8859-1"?> <!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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/CSS"> body {text-align:center} #outer { width:60%; background:#ffffcc; margin:auto; text-align:center; } .inner { width:100px; height:100px; margin:5px; border:1px solid #000; } * html .inner {display:inline}/* for ie*/ html>body #outer {display:table}/*for mozilla */ html>body .inner {display:table;float:left}/*for mozilla */ @media all and (min-width: 0px){/* opera 7 styles */ html>body .inner {display:inline-block;float:none;} } </style> </head> <body> <!-- force quirks mode by using the xml pro-logue --> <div id="outer"> <div class="inner">test</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> <div class="inner">12</div> <div class="inner">13</div> <br style="clear:both" /> </div> </body> </html> | |
您可能感兴趣的文章：
css中文字图片背景图居中的方法汇总
html5 table标签的样式介绍（另附html5 table css居中的实例）
Css实现图片垂直上下左右居中显示
css实现在div水平垂直居中与图片水平居中的效果
CSS DIV设计实例实现让多个DIV排列时居中
css 文字垂直居中实现方法总结
彻底弄懂CSS盒子模式(DIV布局快速入门)
如何掌握CSS布局
你未必知道的10个CSS技巧
css浮动元素的居中的例子