如何讓區塊(DIV)在區塊(DIV)中 水平置中 如何讓區塊(DIV)在區塊(DIV)中 水平置中
      ez      2013-08-28

今天想使用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)  


標籤:   DIV水平置中、  DIV置中、  HTML、  前端入門、  前端幼幼班

我要留言