亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2013-07-20 23:53:10   作者：佚名   我要評論
我們在css編寫中需要對大篇幅的內(nèi)容顯示的更好看，有些間隔，不要在擠在一起難看，就可以使用Line-Height屬性進行控制

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

一、line-height行高語法


復制代碼
代碼如下:

line-height:22px
.jb51div{line-height:22px}
line-height:200%
.jb51div{line-height:200%}

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

二、行高應用介紹 

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代碼片段


復制代碼
代碼如下:

.jb511{ line-height:20px }/* 行高20px */
.jb512{ line-height:30px; height:30px;}/* 高度固定上下居中 */

2、html代碼片段


復制代碼
代碼如下:

<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行高不是個難點，之所以講解是想讓大家知道，使用什么樣方式更加友好。需要的朋友不要錯過。


復制代碼
代碼如下:

<!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標簽
這里是第二行內(nèi)容</h1>
<p>一個簡單的, step-by-step 關(guān)于 CSS 行高的演示文檔, 涵蓋行間距, 如何應用各種類型的行高值, 當然還有 inline box 模型介紹, 希望能滿足您
（但實戰(zhàn)應用在中文字體或中英文字體混合，以及IE678，XP win7里，行高規(guī)則又有所不同，淚流滿面）
</p>
</body>
</html>

相關(guān)文章

最新評論