很多时候我们需要设置文本居中,这个时候我们知道应该设置,外层的容器的height跟line-height一致,就可以实现单行文本居中了,但是这个样子只适合单行,如果我们要设置多行文本居中,需要怎么做呢?
我们要做的就是让多行文本相对外部容器是一行一个模型。
因此,设置外部依旧是height==line-height.再把多行文字添加进入一个span容器中,设置display为inline-block,再设置其line-height为normal默认的,就可以实现居中了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.con{
width: 200px;
height: 500px;
line-height: 500px;
background: red;
}
.con>span{
display: inline-block;
line-height: normal;
}
</style>
<body>
<div class="con">
<span>
<span>中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的中说的</span>
</span>
</div>
</body>
</html>
本文参考自 <<高效前端-web高效编程与开发实践>>在这里也推荐给大家