常常使用line-height設(shè)置內(nèi)容（圖片、文字）行高上下居中樣式效果。
一、line-height行高語法
復(fù)制代碼代碼如下:
line-height:22px
.jb51div{line-height:22px}
line-height:200%
.jb51div{line-height:200%}
line-height:+數(shù)字+單位（在CSS布局中我們一般采用像素px為單位）
行高line-height的值可以為百分比數(shù)字 | 由浮點數(shù)字和單位標(biāo)識符組成的長度值，允許為負(fù)值。其百分比取值是基于字體的高度尺寸。
二、行高應(yīng)用介紹
Line-height行高屬性，運用到對文字排版，實現(xiàn)上下排文字間隔距離，以及單排文字在一定高度情況上下垂直居中布局。
1、對于文章類文字上下排間隔
一般我們對對象設(shè)置設(shè)置line-height行高屬性即可實現(xiàn)讓自動換行文字排版均勻間隔多少設(shè)置。
2、對單排文字上下垂直居中
假如我們一個固定30px高度div對象，如果要讓其文字內(nèi)容上下垂直居中，我們即可使用line-height:30px即可。
三、line-height案例
我們設(shè)置兩個div對象盒子，一個是多排文字行高設(shè)置；另外一個高度固定一排文字，實現(xiàn)文字中此高度固定內(nèi)上下垂直居中。兩個案例我們都使用css line-height實現(xiàn)。
1、css代碼片段
復(fù)制代碼代碼如下:
.jb511{ line-height:20px }/* 行高20px */
.jb512{ line-height:30px; height:30px;}/* 高度固定上下居中 */
2、html代碼片段
復(fù)制代碼代碼如下:
<div class=”jb51″>
我是第一排
我是第二排
我是第三排
</div>
<div class=”jb51″>我高度為30px,實現(xiàn)上下居中</div>
line-height總結(jié)
line-height行高上下居中屬性樣式，使用于多排文字如文章內(nèi)容實現(xiàn)文字上下排間隔居中屬性，以及單排高度固定的上下垂直居中。常常遇見內(nèi)容與圖片混排，我們希望圖片和文字內(nèi)容上下居中在一排，但是文字會居圖片下部，通常解決方法是使用兩個盒子分別設(shè)置行高與高度。
在一排的文字或內(nèi)容布局中，如果要讓內(nèi)容上下垂直居中，我們只需要設(shè)置line-height與height高度相同高度長度與html單位即可實現(xiàn)垂直居中；如果是多列的或文章內(nèi)容通常我們會設(shè)置每行文字一定平均上下間隔，這個時候我們只需要設(shè)置line-height行高即可
CSS中關(guān)于行高Line Height屬性的解析
CSS行高不是個難點，之所以講解是想讓大家知道，使用什么樣方式更加友好。需要的朋友不要錯過。
復(fù)制代碼代碼如下:
<!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”>
新聞熱點
疑難解答
