常常使用line-height設(shè)置內(nèi)容（圖片、文字）行高上下居中樣式效果。

一、line-height行高語(yǔ)法

line-height:+數(shù)字+單位（在CSS布局中我們一般采用像素px為單位）
行高line-height的值可以為百分比數(shù)字 | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，允許為負(fù)值。其百分比取值是基于字體的高度尺寸。

二、行高應(yīng)用介紹 

Line-height行高屬性，運(yùn)用到對(duì)文字排版，實(shí)現(xiàn)上下排文字間隔距離，以及單排文字在一定高度情況上下垂直居中布局。

1、對(duì)于文章類(lèi)文字上下排間隔
一般我們對(duì)對(duì)象設(shè)置設(shè)置line-height行高屬性即可實(shí)現(xiàn)讓自動(dòng)換行文字排版均勻間隔多少設(shè)置。

2、對(duì)單排文字上下垂直居中
假如我們一個(gè)固定30px高度div對(duì)象，如果要讓其文字內(nèi)容上下垂直居中，我們即可使用line-height:30px即可。

三、line-height案例 

我們?cè)O(shè)置兩個(gè)div對(duì)象盒子，一個(gè)是多排文字行高設(shè)置；另外一個(gè)高度固定一排文字，實(shí)現(xiàn)文字中此高度固定內(nèi)上下垂直居中。兩個(gè)案例我們都使用css line-height實(shí)現(xiàn)。

1、css代碼片段

2、html代碼片段

line-height總結(jié)

line-height行高上下居中屬性樣式，使用于多排文字如文章內(nèi)容實(shí)現(xiàn)文字上下排間隔居中屬性，以及單排高度固定的上下垂直居中。常常遇見(jiàn)內(nèi)容與圖片混排，我們希望圖片和文字內(nèi)容上下居中在一排，但是文字會(huì)居圖片下部，通常解決方法是使用兩個(gè)盒子分別設(shè)置行高與高度。

在一排的文字或內(nèi)容布局中，如果要讓內(nèi)容上下垂直居中，我們只需要設(shè)置line-height與height高度相同高度長(zhǎng)度與html單位即可實(shí)現(xiàn)垂直居中；如果是多列的或文章內(nèi)容通常我們會(huì)設(shè)置每行文字一定平均上下間隔，這個(gè)時(shí)候我們只需要設(shè)置line-height行高即可

CSS中關(guān)于行高Line Height屬性的解析

CSS行高不是個(gè)難點(diǎn)，之所以講解是想讓大家知道，使用什么樣方式更加友好。需要的朋友不要錯(cuò)過(guò)。