iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
4
Modern Web

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

使用CSS ::before + inline-block 屬性來達到垂直置中

簡言

這是一個歷史最悠久的垂直置中方式了,支援度達到IE6+,這個方式基本上非常的符合垂直對齊的字面上意思,他是真的讓兩個物件之間做到垂直對齊。我們使用 :before 偽元素搭配 display: inline-block 屬性的寫法,並讓兩個 inline-block 物件做垂直對齊( vertical-align: middle ),這算是很傳統的垂直對齊技巧了,此方式的好處在於子層置中物件可以不需要特別設定高度,我們利用 100% 高的 :before偽元素以及不定高的內容區塊設定為 inline-block,就能對兩者使用 vertical-align: middle 來達到 :before 與 inline-block 內容物件垂直對齊的目的了,此方式在以往其實是個非常棒的垂直置中解決方案,唯獨需要特別處理掉 inline-block 物件之間的4至5px空間這個小缺點。

原理概念說明

此方式利用了 inline-block 中 inline 的特性來達成垂直置中,基本上 inline-block 同時擁有 inline 以及 block 兩種特性在內,除部分特性有所差異外,兩者的重點特性都保留了,像是 inline 的行排列特性以及 block 的區塊寬高範圍特性,這次的方法,Amos採用的就剛好是這兩個特性的結合。這個範例的重點項目說明如下

  1. 首先在外層的 .box 上面產出一個 ::before 偽元素並將其設定為 inline-block
  2. 利用 inline-block 可以設定高度的特性將偽元素設定高度為100%,讓他跟父層等高
  3. 將 .content 設定為 inline-block,利用其 inline 特性準備讓他跟偽元素能夠併排在同一行
  4. 如果 .content 會折行的話,基本是因為 .content 太寬的緣故,加上 inline-block 物件之間會有空白,所以我們需要後續的動作處理換行問題。
  5. 由於是因為偽元素跟 .content 之間空白字元問題導致我的寬度計算無法精準掌控,所以 Amos 在 .box 設定 font-size: 0,讓空白字元的大小變成 0 就不占空間了,這樣縱使 .content 寬度 100% 也不會出現換行狀況了
  6. 最後 Amos 將設定為 inline-block 的偽元素與 .content 同時設定 vertical-align:middle 就能讓畫面看起來垂直置中於 .box 了。但事實卻是 .content 只是與 ::before 做垂直對齊中間罷了。

原始碼

HTML

<div class="box box3">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

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


上一篇
使用CSS line-height + inline-block 做多行文字的垂直置中
下一篇
使用 absolute + margin負值來達到垂直置中的目的
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言