透過CSS讓文字「垂直置中」的小技巧

再提文字垂直置中的時候 , 先提一下文字水平置中 , 相信只要有CSS初學的水平都知道 , 只需要對文字的Div容器下 text-align:center 就可以了 , 但若是垂直置中呢 ? 有些人應該反應很快會想到 , 只要在Table中對td撰寫 <td valign="middle"> 就可以啦 , 沒錯這也是一個方法 , 但還是另外一種解法可透過CSS來達成效果 , 就是利用Display 改變元素型態 , 讓置中的語法Working , 下面可直接參考範例

HTML結構

1. <section>
   
2.     <div class="txt-middle">
   
3. 文字置中CSS語法效果
   
4.     </div>
   
5. </section>

複製代碼

CSS

1. section {display: table;} //元素轉換型態
   
2. .txt-middle {display: table-cell;vertical-align: middle;} //元素轉換Table單元 , 賦予垂直控制

複製代碼

備註：isplay:table-cell 語法 , 目前IE8以上瀏覽器以及其他瀏覽器(C,F,S牌) 都可支援 , 至於IE6/IE7 ..... ㄜ隨他們去吧 一_一
另外，與其他一些display屬性類似，table-cell 同樣會被其他一些CSS屬性破壞，例如 float, position:absolute，所以，在使用display:table-cell 與 float:left 或是 position:absolute 屬性儘量不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上型態轉換後就是 td 標籤元素了 (就和display:block後基本上就是活生生的DIV元素一樣的道理) 。