line-height 如何实现“垂直居中”
2018-01-16 本文已影响0人
戴西西的染坊
line-height
div 到底是谁撑起来的？
- 字体？ 行高？
<style>
.box {
font-size:0;
line-height: 32px;
border:1px solid red;
}
.box1 {
font-size:32px;
line-height: 0;
border:1px solid red;
}
</style>
<body>
<div class="box"> i am a dog</div>
<br>
<div class="box1"> i am a dog</div>
</body>
显示如图：
ceshi
由此可见行高决定了div的高度
行距？字的间距？
- 印刷排版间距每行字体距离，css中则是在文字上下各一半.那么line-height 设置的是什么？
- line-height设置的是 文字高度，行距包含在其中，那么行距如何计算呢？
- 行距 = line-height - font-size ，半行距就是 (line-height - font-size) / 2
- 小数值上边距向下取整，下边距向上取整.
作用？ “垂直居中” ？
-
line-height 对可替换行内元素（如button、input）不起作用，对非替换行内元素可视高度由line-height 来撑起，对块级元素没有作用（变化是因为改变了块级元素里的行内元素实现的）
-
垂直居中需不需要设置行高和“高度”一样？
- 上面有关于字体大小，行距和行高的计算，可知当行高（line-height）和字体大小一样时 "行 字间距" 为 0，如果为2 则字间距是两行 每行的半字距加在一起就是一个字体的高度（如：字体大小为14px，行高为28px,则半行距是
(28 -14) /2 = 7px两行之间则是14px。那么单行原理也是如此，和高度无关，直接设置行高即可！
- 上面有关于字体大小，行距和行高的计算，可知当行高（line-height）和字体大小一样时 "行 字间距" 为 0，如果为2 则字间距是两行 每行的半字距加在一起就是一个字体的高度（如：字体大小为14px，行高为28px,则半行距是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
border:1px solid red;
font-size:14px;
line-height:28px;
}
.box span {
background-color:#888;
}
</style>
</head>
<body>
<div class="box">
<span>枯藤老树昏鸦，小桥流水人家</span><span>古道西风瘦马，夕阳西下，断肠人在天涯。</span>
</div>
</body>
</html>
demo
- 行高设置垂直居中只对单行有效？
参考资料：
