1.多行文字垂直居中:
<div>
<span>随便写点什么拿来测试</span>
</div>
div{
width: 100px;
height: 100px;
margin: 100px auto;
border: 1px solid #000;
display: table;
}
span{
line-height: 20px;
display: table-cell;
vertical-align: middle;
}
如图:
2.清除间隙: 比如写在两行的span里面的内容中间会有个间隙
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<span>123</span>
<span>456</span>
</div>
</body>
</html>
如图
这是因为换行会渲染一个空格,如果两个span写在同一行就不会有间隙,但不符合我们习惯,那么用css解决:
div{
font-size: 0;
}
span{
font-size: 16px;
}