DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS實現讓多個Div排列居中的方法
CSS實現讓多個Div排列居中的方法
編輯:CSS詳解     

CSS實現讓多個Div排列居中的方法,我覺得這個布局挺實用,不管大小網站似乎都要用到,平時覺得再普通不過了,不過自己動手設計的時候,或許會眼高手低了,今天這個CSS居中排列實例,希望可以幫到您。 

vIEw source print? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 02 <Html XMLns="http://www.w3.org/1999/xHtml"> 03 <head> 04 <title>CSS多個Div排列居中的方法</title> 05 <style type="text/CSS"> 06 body {text-align:center} 07 #outer { 08  width:60%; 09  background:#ffffcc; 10  margin:auto; 11  text-align:center; 12 } 13 .inner { 14  width:100px; 15  height:100px; 16  margin:5px; 17  border:1px solid #000; 18 } 19 * Html .inner {display:inline}/* for IE*/ 20 Html>body #outer {display:table}/*for mozilla */ 21 Html>body .inner {display:table;float:left}/*for mozilla */ 22 @media all and (min-width: 0px){/* Opera 7 styles */ 23 Html>body .inner {display:inline-block;float:none;} 24 } 25 </style> 26 </head> 27 <body> 28 <!-- force quirks mode by using the XML pro-logue --> 29 <div id="outer"> 30   <div class="inner">test</div> 31   <div class="inner">2</div> 32   <div class="inner">3</div> 33   <div class="inner">4</div> 34   <div class="inner">5</div> 35   <div class="inner">6</div> 36   <div class="inner">7</div> 37   <div class="inner">8</div> 38   <div class="inner">9</div> 39   <br style="clear:both" /> 40 </div> 41 </body> 42 </Html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved