搜索
SR數位設計 ECSHOP RWD響應式技術開發 HTML/CSS 語法 透過CSS讓文字「垂直置中」的小技巧
byadmin 發表於 2015-8-20 11:25:12 , 1905人已閱讀 , 0人回應
再提文字垂直置中的時候 , 先提一下文字水平置中 , 相信只要有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元素一樣的道理) 。



Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.190313 second(s), 39 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-4-24 23:17

回頂部