iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0

簡言

place-content 這個 CSS Grid 的屬性不知道有多少人用過,此屬性是 align-content 與 justify-content 的縮寫,簡單的說就是水平跟垂直的對齊方式,想當然的,設定 center 就能置中囉。

原理說明

原理...跟簡言寫的一樣,這樣解釋會不會太偷懶XD
基本上使用簡寫方式的話,多是多個屬性的值和在一個屬性上面來撰寫,這概念很簡單,所以我們利用 place-content 這個綜合了 align-content 與 justify-content 的簡寫屬性,值的部分我只寫了一個 center,因為當我只寫一個 center 的時候,表示兩個屬性都會套用此值,也就達到更偷懶的境界了(偷懶是進步之本無誤),很簡單的一個垂直置中技巧,各位可以去無痛撰寫囉。

原始碼

HTML

<div class="box box17">
  <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;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}

實際示範頁面

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


上一篇
使用 Grid + place-items 來做垂直置中效果
下一篇
使用 Grid + margin 來達到垂直置中目的
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言