CSS line-height行高上下置中垂直置中樣式屬性

來源:互聯網
上載者:User

常常使用line-height設定內容(圖片、文字)行高上下置中樣式效果。

一、line-height行高文法

 

複製代碼代碼如下:
line-height:22px
.jb51div{line-height:22px}
line-height:200%
.jb51div{line-height:200%}

line-height:+數字+單位(在CSS布局中我們一般採用像素px為單位)
行高line-height的值可以為百分比數字 | 由浮點數字和單位標識符組成的長度值,允許為負值。其百分比取值是基於字型的高度尺寸。

二、行高應用介紹 

Line-height行高屬性,運用到對文字排版,實現上下排文字間隔距離,以及單排文字在一定高度情況上下垂直置中布局。

1、對於文章類文字上下排間隔
一般我們對對象設定設定line-height行高屬性即可實現讓自動換行文字排版均勻間隔多少設定。

2、對單排文字上下垂直置中
假如我們一個固定30px高度div對象,如果要讓其文字內容上下垂直置中,我們即可使用line-height:30px即可。

三、line-height案例 

我們設定兩個div對象盒子,一個是多排文字行高設定;另外一個高度固定一排文字,實現文字中此高度固定內上下垂直置中。兩個案例我們都使用css line-height實現。

1、css程式碼片段

 

複製代碼代碼如下:
.jb511{ line-height:20px }/* 行高20px */
.jb512{ line-height:30px; height:30px;}/* 高度固定上下置中 */

2、html程式碼片段

 

複製代碼代碼如下:
<div class="jb51">
我是第一排

我是第二排

我是第三排
</div>
<div class="jb51">我高度為30px,實現上下置中</div>

line-height總結

line-height行高上下置中屬性樣式,使用於多排文字如文章內容實現文字上下排間隔置中屬性,以及單排高度固定的上下垂直置中。常常遇見內 容與圖片混排,我們希望圖片和文字內容上下置中在一排,但是文字會居圖片下部,通常解決方案是使用兩個盒子分別設定行高與高度。

在一排的文字或內容布局中,如果要讓內容上下垂直置中,我們只需要設定line-height與height高度相同高度長度與html單位即可實 現垂直置中;如果是多列的或文章內容通常我們會設定每行文字一定平均上下間隔,這個時候我們只需要設定line-height行高即可

CSS中關於行高Line Height屬性的解析

CSS行高不是個痛點,之所以講解是想讓大家知道,使用什麼樣方式更加友好。需要的朋友不要錯過。

 

複製代碼代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { line-height:1.5;}
</style>
</head>
<body>
<h1>這裡是h1標籤
這裡是第二行內容</h1>
<p>一個簡單的, step-by-step 關於 CSS 行高的示範文檔, 涵蓋行間距, 如何應用各種類型的行高值, 當然還有 inline box 模型介紹, 希望能滿足您
(但實戰應用在中文字型或中英文字型混合,以及IE678,XP win7裡,行高規則又有所不同,淚流滿面)
</p>
</body>
</html>

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。