iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
10
Modern Web

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

使用CSS Line-height 做垂直置中

簡言

這個方式應該是最多人知道的了,其實這符合資料垂直置中而非垂直對齊,常見於單行文字的應用,像是按鈕這一類物件,或者是選單、導覽列此類物件最常見到此方式了。此方式的原理是在於將單行文字的行高 line-height 設定後,文字會位於行高的垂直中間位置,利用此原理就能輕鬆達成垂直置中的需求了。

Line-height 原理

基本上Line-height 的原理跟特性就是設定行的高度,可以說是一行字所要佔據的高度空間是多少,他會把整個空間分配到文字的上方與下方,也因為這樣的特性,讓我們可以利用他來達到單行文字垂直置中的目的,等同於利用 Line-height 來取代 height 屬性,但多行文字呢? 剛剛說過,因為它是單行文字的高度,所以基本上如果是多行的話,會導致單行過高就無法達成垂直置中了。但並非完全無法達成,下一篇文章就讓我們來了解使用Line-height做多行垂直置中的技巧吧

原始碼

HTML

<div class="content">Lorem ipsam.</div>

CSS

.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

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


下一篇
使用CSS line-height + inline-block 做多行文字的垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

2
yowlonglee
iT邦新手 5 級 ‧ 2018-10-29 17:43:05

光是置中就可以寫30天/images/emoticon/emoticon37.gif

是不是該請某個叫致中的來代言一下?

CSScoke iT邦新手 3 級 ‧ 2018-10-29 18:07:04 檢舉

/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif

我要留言

立即登入留言