前端7班 陆恩泽
初期的博客主要是把自己模糊的知识点细究一下，搜索其他人的相关技术博客整理吸收为自己的。最近一直对CSS样式中的line-height属性不太理解，我们在对文本进行垂直水平居中时会设置行高和height相等实现这一操作。老样子还是传送门。
CSS中的行高是指文本行中基线的高度，盗用一张原博中的图片。
说明图片
基线指的是图中的红线，很多人肯能误以为是粉红色的线，粉红色的线是底线。所以行高就是红线之间的距离。
line-height应用
div文字垂直居中
单行文字垂直居中，把line-height设置为box的大小可以实现单行文字的垂直居中。
多行文字垂直居中。这里我转了别人一个方法，传送门在这边。多行文本垂直居中方法为：用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性）
，然后用处理图片垂直居中的方式处理文字的垂直居中即可。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
div{
display:table-cell;
border:1px solid black;
width:150px;
height:150px;
text-align:center;
vertical-align:middle;
}
span{
display:inline-block;
vertical-align:middle;/**只能用于table中**/
</style>
</head>
<body>
<div>
<span>hellow world!<br/>
hellow world!<br/>
hellow world!</span>
</div>
</body>
</html>
先就这样吧。>.-.<
网友评论