iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
1
Modern Web

連續30天的超實務網頁設計的垂直置中教學系列 第 24

使用 table 來做垂直置中區塊

簡言

這個方式...沒甚麼好講的,就是一個很單純的用表格來做垂直置中,應該算是初初初初初級垂直置中技巧啦。

原理說明

去看這篇 使用 Display: table-cell 做網頁垂直置中 的說明就知道了(寫這麼少! Amos 用偷吃步啦)
好啦! 我們還是來講講原理好了,基本上 CSS 中的 vertical-align: middle 只在 inline 跟 table-cell 兩種屬性的物件上會有作用,其中 table-cell 的部份就是表格的儲存格屬性,之前我們有利用過將 div 設定為 table-cell 屬性來達成垂直置中的方式,這次我們直接用原生的 table 來做啦,所以原理很簡單吧XDDDD,如果這樣還不懂的話,那麼歡迎來看 Amos 的直播直接聊聊。

<table class="box">
  <tr>
    <td>
      <div class="content">
        <div class="txt">
          立馬來看 Amos 實際完成的
          <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
            CSS3精美相簿效果
          </a>
          效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
          這個置中的想法來自於 Paul 
        </div>
      </div>
    </td>
  </tr>
</table>
table.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
table.box td{
  vertical-align: middle;
  text-align: center;
}
.content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  text-align: left;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Writing-mode 來做垂直置中區塊
下一篇
使用 flex + before + after + flex-grow 來做垂直置中區塊
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言