CSSline-height⾏⾼上下居中垂直居中样式属性
常常使⽤line-height设置内容（图⽚、⽂字）⾏⾼上下居中样式效果。
⼀、line-height⾏⾼语法
复制代码
代码如下:
line-height:22px
.jb51div{line-height:22px}
line-height:200%
.jb51div{line-height:200%}
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代码⽚段
复制代码
代码如下:
.jb511{ line-height:20px }/* ⾏⾼20px */
.jb512{ line-height:30px; height:30px;}/* ⾼度固定上下居中 */
2、html代码⽚段
复制代码
代码如下:
<div class="jb51">
我是第⼀排
我是第⼆排
我是第三排
</div>
<div class="jb51">我⾼度为30px，实现上下居中</div>
line-height总结div中的div居中
line-height⾏⾼上下居中属性样式，使⽤于多排⽂字如⽂章内容实现⽂字上下排间隔居中属性，以及单排⾼度固定的上下垂直居中。常常遇见内容与图⽚混排，我们希望图⽚和⽂字内容上下居中在⼀排，但是⽂字会居图⽚下部，通常解决⽅法是使⽤两
个盒⼦分别设置⾏⾼与⾼度。
在⼀排的⽂字或内容布局中，如果要让内容上下垂直居中，我们只需要设置line-height与height⾼度相同⾼度长度与html单位即可实现垂直居中；如果是多列的或⽂章内容通常我们会设置每⾏⽂字⼀定平均上下间隔，这个时候我们只需要设置line-height⾏⾼即可
CSS中关于⾏⾼Line Height属性的解析
CSS⾏⾼不是个难点，之所以讲解是想让⼤家知道，使⽤什么样⽅式更加友好。需要的朋友不要错过。
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。