iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
3
Modern Web

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

蓋版廣告的垂直置中技巧跟支援

數位生態

蓋板廣告太常見到了,目前幾乎人手多機的情況下,我們每天幾乎都離不開上網這行為,上網除了上班用電腦以外,幾乎都是用行動裝置上網了,也就經常會看到蓋版廣告這種網路生態中的常見數位生物(咦?生物?),在一個網路內容多數都閱覽免費的情況下,蓋版廣告可以説是網站經營中不可或缺的收入來源,所以它的重要性可見一班了,今天我們就來帶壞大家看看蓋版廣告的垂直置中方式。

蓋版廣告版面需求

蓋版廣告基本上要達到廣告區塊會蓋住整個畫面的情況,所以我們需要固定區塊的定位在視窗之中,其中較常見到的方式有兩個,一個是 absolute ,一個則是 fixed,這兩種都有人使用,但要讓你不管怎麼捲動都能蓋住版面的話,那就是要設定 fixed 才行了,有了 fixed 的區塊之後,我們就能在裡面設置我們所想要的垂直直至中畫面了,大致原理就是這樣。所以讓我們來看看蓋版廣告的範例原始碼

只蓋部分並垂直置中

<div class="content">
  <h2>Amos的垂直置中好也</h2>
  <p>
    垂直置中須於中;<br>
    直豎在中皆可置;<br>
    置位於中正且直;<br>
    中於正中不再垂.
  </p>
</div>
.content{
  width: 400px;
  height: 200px;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

上面這種寫法的缺點就是需要讓內容有固定高度,有時候我們的內容高度不固定的話就沒辦法了,所以我們可以改用下面的寫法或許更彈性些。

<div class="wrap">
  <div class="content">
    <h2>Amos的垂直置中好也</h2>
    <p>
      垂直置中須於中;<br>
      直豎在中皆可置;<br>
      置位於中正且直;<br>
      中於正中不再垂.
    </p>
  </div>
</div>
.wrap{
  width: 400px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display:flex;
  align-items: center;
}
.content{
  width: 100%;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
}

上面這種寫法讓內容可以不用固定高度,彈性變大了,但支援度也變低了,IE10以下都不支援,但你也可以改用支援度更高的「使用CSS ::before + inline-block 屬性來達到垂直置中」,讓他最低可以支援到IE8。

內容垂直置中,整體蓋好蓋滿通通蓋

這種垂直置中可以讓你有個蓋滿版面的半透明區塊,效果可以說是最常見了,這種區塊的好處是可以讓你對畫面有聚焦效果。

<div class="wrap">
  <div class="content">
    <h2>Amos的垂直置中好也</h2>
    <p>
      垂直置中須於中;<br>
      直豎在中皆可置;<br>
      置位於中正且直;<br>
      中於正中不再垂.
    </p>
  </div>
</div>
.wrap{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  margin: auto;
  display:flex;
  justify-content:center;
  align-items: center;
  background-color: rgba(0,0,0,.3);
}
.content{
  width: 400px;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
}

上面這邊 Amos 利用了半透明的背景色彩來處理那個黑色,而且很偷懶的使用了 flex 來做最直置中,但這種做法可能舊版的瀏覽器(像IE8)不支援這種太新的語法,所以我們也可以改用以下寫法來讓他支援度更高些(支援所有版本瀏覽器)。

.wrap{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  margin: auto;
  text-align:center;
  font-size: 0;
}
.wrap:before{
  content:'';
  display: inline-block;
  width: 0px;
  height: 100%;
  vertical-align: middle;
}
.wrap:after{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #000;
  opacity:.5
}
.content{
  width: 400px;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
  position: relative;
  z-index: 1;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}

範例頁面
這樣就完美解決了所有問題啦。

有沒有其他蓋版廣告的垂直置中寫法

當然有其他垂直置中寫法啦,這邊能夠應用的方式要看你專案的需求,正常來說只要是不管IE這瀏覽器的話,基本上 Amos 所寫的所有垂直置中技巧都能應用進去,但如果你需要支援到IE的話,那就請你看「IE8以上的網頁我該如何做垂直置中」這一篇文章了,裡面詳述了當你要支援到IE時的各種垂直置中做法。

延伸應用有哪些

了解了蓋版廣告的原理之後,基本上我們就能應用在很多算的需求上面,像是登入區塊、註冊畫面、回應區塊、 彈出式訊息、不讓你用區塊(咦?)...等等這一類的應用,基本上就是要蓋住版面就對了啦。除了這些以外當然同樣地原理只要能達到你的需求的話,也都能拿來應用上去就對了。

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS可樂部落格
CSS coke的Youtube直播頻道
快按此訂閱CSS coke的頻道
/images/emoticon/emoticon12.gif


上一篇
左圖右文版面,文字垂直置中的方式?
下一篇
Amos除了這超過25種垂直置中外還有別的方式嗎?
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言