html设置line竖直居中,line-height 如何实现“垂直居中”

line-height

div 到底是谁撑起来的？

字体？ 行高？

.box {

font-size:0;

line-height: 32px;

border:1px solid red;

}

.box1 {

font-size:32px;

line-height: 0;

border:1px solid red;

}

i am a dog

i am a dog

显示如图：

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。那么单行原理也是如此，和高度无关，直接设置行高即可！

JS Bin

.box {

border:1px solid red;

font-size:14px;

line-height:28px;

}

.box span {

background-color:#888;

}

枯藤老树昏鸦，小桥流水人家古道西风瘦马，夕阳西下，断肠人在天涯。

demo

行高设置垂直居中只对单行有效？

参考资料：