今天想使用HTML畫出一個大格子中包著小格子 (換句話說就是讓多行內容區塊水平置中) 原本以為要讓小格子水平置中只要加上text-align:center,沒想到居然失敗ヘ(○゚△゚)ノ 究竟要怎樣才能達到我想要得呢? 【Demo】
123
【Sample code】
<div style="width:180px; height:200px; margin:5px; padding:10px 5px; background-color:#CCC; border:dashed #FFF 1px; float:left;"> <div style="width:160px; height:140px; background-color:#F99; margin:auto;"> </div> <div> 123 </div> </div>
[說明]
→在要置中的內層Div加入margin:auto;
上面這個方法相容IE6,IE7,IE8,FireFox,Safari…等多款瀏覽器,同時如果使用Table無法置中也用此法解決 ^^ 參考資料︰Div或其他HtmlTag容器置中的方式(相容IE6,IE7,IE8,FireFox,Safari)
2013-08-28 ez