CSS中line height的奇妙用處

常常使用

line-height

設定內容（、文字）行高上下居中樣式效果。

line-height:+數字+單位（在css布局中我們一般採用畫素px為單位）

行高line-height的值可以為百分比數字 | 由浮點數字和單位識別符號組成的長度值，允許為負值。其百分比取值是基於字型的高度尺寸。

行高應用介紹 -

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

1、對於文章類文字上下排間隔

一般我們對物件設定設定line-height行高屬性即可實現讓自動換行文字排版均勻間隔多少設定。

2、對單排文字上下垂直居中

假如我們乙個固定30px高度

div物件，如果要讓其文字內容上下垂直居中，我們即可使用line-height:30px即可。

我們設定兩個div物件盒子，乙個是多排文字行高設定；另外乙個高度固定一排文字，實現文字中此高度固定內上下垂直居中。兩個案例我們都使用css line-height實現。

1、css**片段

.divcss5/* 行高20px */

.divcss52/* 高度固定上下居中 */

2、html**片段

<
divclass
="divcss5"
>
我是第一排<
br/>
我是第二排<
br/>
我是第三排 
div>
<
divclass
="divcss52"
>
我高度為30px,實現上下居中
div>

3、line-height案例效果截圖

line-height行高應用案例截圖

大家下來可以根據案例圖複製css和html**親自實踐作為div+css line-height行高屬性。

通過以上案例大家可以將行高line-height的值修改然後測試觀察效果方知曉line-height作用。

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

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