Línea de base: hay una línea de base para la alineación en el diseño de los elementos de tipo de texto del navegador, como se muestra en la
siguiente figura: algunas partes están fuera de la línea de base. 
Dado que algunos caracteres son grandes y otros son pequeños, habrá un fenómeno lamentable de dirección vertical. Cuando el navegador encuentra etiquetas en línea y de bloque en línea como procesamiento de texto, el texto predeterminado se basa en el objeto de línea de base
Puede imaginar la imagen grande de la izquierda como un carácter grande y el carácter grande de la derecha como un carácter pequeño. No hay alineación vertical en este punto.
La alineación se puede lograr con vertical-align.
Caso 1: la entrada y el botón no están alineados:
Solución: agregue vertical-align.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
input {
height: 50px;
box-sizing: border-box;
vertical-align: middle;
}
</style>
</head>
<body>
<input type="text"><input type="button" value="搜索">
</body>
</html>
Caso 2: La parte inferior de la imagen y la entrada no están alineadas en el centro
Solución:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="../images/1.jpg" alt=""><input type="text">
</body>
</html>
Caso 3: La entrada no se publica
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
/* vertical-align: middle; */
vertical-align: top;
}
</style>
</head>
<body>
<div class="father">
<input type="text">
</div>
</body>
</html>
Lograr la alineación superior
Caso 4: el elemento secundario img no está adjunto a la parte inferior
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
/* vertical-align: middle; */
display: block;// 不再是行（内）块元素，不当做文字处理
}
</style>
</head>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
</html>
Caso 5: el elemento secundario img no está centrado
Código fuente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
}
</style>
</head>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
Nota: Está escrito que la altura de la línea es igual a la altura, pero la imagen no está centrada.
Mejorar código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
text-align: center;
}
img {
vertical-align: middle;//关键语句
}
</style>
</head>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
</html>
Resumen:
¡vertical-align se especializa en varios problemas de alineación en la dirección vertical!