前端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>
先就这样吧。>.-.<