A menudo utiliza la altura de línea para centrar el contenido verticalmente. ¿Realmente comprende el principio?
1. ¿Qué es la altura de la línea?
La propiedad line-height establece la distancia entre líneas (altura de línea). Para decirlo sin rodeos, es establecer la distancia entre dos párrafos de texto. Si establecemos la altura de línea de un fragmento de texto a la altura del elemento principal contenedor, el texto se puede centrar verticalmente.
2. Analizar su principio
Primero mire una imagen
, cada línea de texto puede verse como compuesta de espaciado superior, contenido de texto y espaciado inferior. De acuerdo con la definición estándar de altura de línea, la altura de línea es igual a la distancia entre las dos líneas de base, que es 3 en la primera línea. -4 + espacio arriba y abajo + 1-2 + 2-3 de la segunda fila, porque el espacio superior e inferior de cada fila en css debe ser igual, así que reemplácelo, la altura de la fila es igual a su propio espaciado superior + espaciado inferior + altura del texto. Por lo tanto, también podemos registrar la altura de la línea como, la altura de la línea es la altura de una línea, y la altura de esta línea incluye los espacios superior e inferior y el contenido del texto en sí. El contenido del texto está centrado en cada línea, por lo que utilizando este principio, puede lograr un centrado vertical.
Mira un ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈
</div>
</body>
</html>
Como se muestra en la FIG. En este ejemplo, establecemos la altura del div en 200px, y luego hay una línea de texto en el interior, establecemos la altura de la línea en 200px, después de configurar 200px, el texto en sí no cambiará 16px, pero su espaciado superior e inferior . Como se describe en la figura anterior. Cuando pienso en esto, debes entender por qué la altura de la línea se puede centrar verticalmente.
Tres, expandir
Veamos otro ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈哈哈哈哈哈哈哈哈啊哈哈
</div>
</body>
</html>
Se puede encontrar que la diferencia entre el desplazamiento del código en el ejemplo anterior es que el texto ha aumentado un poco, echemos un vistazo al efecto en este momento.
No parece ser el efecto de centrado vertical que queremos.
El ancho del cuadro div que configuramos es 200px. Por defecto, cuando el ancho del contenido excede el ancho del cuadro, se ajustará automáticamente. Entonces, cuando el texto se ajusta, causa este resultado.
Pensemos en ello de nuevo, incluso si se ajusta automáticamente, queremos el efecto en la imagen de abajo. En lugar del efecto que se muestra en la imagen de arriba.
Primero analice el principio del resultado de la figura anterior. Después del salto de línea, porque establecemos la altura de la línea: 200px. Es decir, establecerá la altura de línea del párrafo en 200px, y en este momento, se cambiará a 3 líneas debido al ajuste automático de línea. Por lo tanto, establece la altura de la línea en 200px para cada línea, que es la razón de la imagen de arriba.
Entonces quiero el efecto como en la imagen de abajo, ¿qué debemos hacer? Podemos usar display: table-cell y vertical-align: middle; para establecer. Mira el código directamente.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈哈哈哈哈哈哈哈哈啊哈哈
</div>
</body>
</html>
Eso es todo por compartir, ¡vamos! Personas de TI
Parte del contenido de este artículo está tomado del autor https://blog.csdn.net/yangyuqingabc/article/details/84178815