常常使用line-height設定內容（圖片、文字）行高上下置中樣式效果。
一、line-height行高文法
複製代碼代碼如下:
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程式碼片段
複製代碼代碼如下:
2、html程式碼片段
複製代碼代碼如下:
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
