iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
4
Modern Web

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

使用CSS line-height + inline-block 做多行文字的垂直置中

簡言

既然可以使用第一種方式對「行物件(inline) 」達成垂直置中的話,當然沒有理由不能做到多行啊!但是你需要將多個物件或多行物件當成一個「行」物件來看待,所以我們必須要將這些資料多包一層,並將其設定為 inline-block,並在該 inline-block 物件的外層物件使用 line-height 來替代 height 的設定,如此便可以達成垂直置中的目的囉,縱使你的資料是包含了標題跟內文在內也可以正常的垂直置中喔。

原理

這個例子最基本就是利用line-height針對行物件可置中的特性,將整個裝載多行文字的.content區塊設定為inline-block,使其具備inline的特性好讓它支援line-height屬性以及vertical-align屬性,接著在.box區塊設定line-height取代其height,就能達成跟第一天的例子一樣的效果了,簡單的說 Amos 是將.content區塊當作是一個單行文字來思考,這樣就能做到『單行』的垂直置中了,但這效果的缺點就是父層一定要固定高度。這方式一般來說不常見到有人這樣寫,但是使用在一些小型區塊其實也挺方便的。要注意到這中間有一個小地方要特別注意,就是.content需要設定vertical-align:middle;才能讓內容區塊順利垂直置中喔。

原始碼

HTML

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

CSS

h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
  vertical-align: middle;
}

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


上一篇
使用CSS Line-height 做垂直置中
下一篇
使用CSS ::before + inline-block 屬性來達到垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言