iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
5
Modern Web

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

Amos除了這超過25種垂直置中外還有別的方式嗎?

  • 分享至 

  • xImage
  •  

老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧,其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式,只是有些概念頗雷同我就沒特別算進去了,像是鐵人賽第28天的「左圖右文版面,文字垂直置中的方式?」裡面就有利用圖片自身高度來達到垂直置中的效果。至於未來會不會繼續生出更多的垂直置中技巧呢? 雖然我認為25個垂直置中技巧已經到頂了,但當初我寫出15個垂直置中技巧時,我也是認為到頂了XDDDD,後面卻硬生生的寫出了 25種方式,真的超自虐的(笑)。

最後一篇了,這篇我不想寫CSS垂直置中了,如果真的要講還有沒有其他的垂直置中技巧,大概就是 JavaScript 了,以往 Amos 有時候也會利用 JavaScript 或者是 JQuery 來做垂直置中,但就是要看稿件需求就是了,所以這最後一天我們就用 JQuery 來做垂直置中吧! 首先先來看一下原始碼

<div class="wrap">
	<div class="text">
		<h3>Amos & CSS coke</h3>
		<p>
            垂直置中寫了30種也太神經了一點,不過寫完的爽度實在超高阿,
            請叫我垂直置中王啦! 哇哈哈哈哈哈哈(被打)
        </p>
	</div>
</div>
.wrap{
	height: 500px;
	border:1px solid #aaa;
}
.text{
	background-color: #ccc;
	width: 500px;
	margin: auto;
	padding: 30px;
	line-height: 1.5;
}
let _wrap_Hi = $('.wrap').height();
let _text_Hi = $('.text').outerHeight();
let _mt = (_wrap_Hi - _text_Hi) / 2;
$('.text').css({'margin-top': _mt});

範例頁面

上面的寫法其實很簡單,就把先把父層的空間抓到,接著再抓子層的高度,兩者相減之後再除2,這樣就得到了一半的父層剩餘空間,接著我們把他設定到子層的margin-top去就搞定啦,就是很簡單的加減乘除計算囉,大家也去試試看吧。

結果最後我還是又寫了一篇垂直置中文啊啊啊啊啊

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

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

阿木!!我完成鐵人賽啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif/images/emoticon/emoticon62.gif


上一篇
蓋版廣告的垂直置中技巧跟支援
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言