Linha de base: há uma linha de base para alinhamento no layout dos elementos do tipo de texto do navegador, conforme mostrado na
figura a seguir: algumas partes estão fora da linha de base. 
Como alguns caracteres são grandes e alguns são pequenos, haverá um fenômeno de direção vertical. Quando o navegador encontra tags de bloco inline e inline como processamento de texto, o texto padrão é baseado no objeto de linha de base
. Você pode imaginar a imagem grande à esquerda como um caractere grande e o caractere grande à direita como um caractere pequeno. Não há alinhamento vertical neste ponto.
O alinhamento pode ser alcançado com alinhamento vertical.
Caso 1: A entrada e o botão não estão alinhados:
Solução: adicione alinhamento vertical.
<!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: A parte inferior da imagem e a entrada não estão alinhadas no centro
Solução:
<!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: A entrada não é postada
<!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>
Alcançando o alinhamento superior
Caso 4: O elemento filho img não está anexado à 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: O elemento filho img não está centralizado
Código fonte:
<!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 a altura da linha é igual à altura, mas a imagem não está centralizada.
Melhorar o 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>
Resumo:
vertical-align é especializado em vários problemas de alinhamento na direção vertical!