css关于图片和文字垂直居中的问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.parent {
width: 1000px;
height: 800px; /* 可以不设置*/
display: inline-block;
text-align: center; /* 水平居中对齐 */
line-height: 800px; /* 文本子元素与父元素高度相等，用于垂直居中对齐(写在这里其实会被text继承), 也可以直接在 text 上使用 line-height: 800px; 但是在img上是不能使用的；其实设置这个line-height: 800px的原因是，改变text的行内框的高度，以修改基线的位置，修改为400px的位置*/
white-space: nowrap; /* 防止换行 */
}
.text {
vertical-align: middle;
}
img{
width: 700px;
height: 600px;
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<img src="./cert.jpg" alt="Image">
<span class="text">Some text Some text </span>
</div>
</body>
</html>
理解:
文本的基线与包含它的行内框 分别指的是什么？
文本的基线和包含它的行内框是与文字排列和布局有关的两个重要概念。让我更详细地解释它们：
1>. **文本的基线**：文本的基线是文字字符底部的水平线。它通常用作文本的垂直对齐参考点。不同字体和字符的基线可能会有所不同。文本的基线用于确定文本在垂直方向上的对齐方式。当你应用 `vertical-align` 时，它通常是相对于文本的基线进行调整的。
2>. **包含它的行内框**：包含它的行内框是指包含文本的行内块容器或行内框。行内框是文本和内联元素呈现的区域，通常是水平排列的。行内框可以包含一个或多个字符、单词或内联元素。包含元素的行内框的高度取决于其内容。当你在文本中创建段落或包含文本的 `<div>` 等元素时，它们通常充当行内块容器，包含一系列行内框。
在上下文中，当你应用 `vertical-align: middle;` 时，它将调整元素的垂直位置，以使元素的基线与包含它的行内框的中央对齐。这意味着元素将在行内框内垂直居中对齐，而行内框的高度通常由包含的内容决定。基线与行内框的中央对齐方式有助于文本和内联元素在其上下文中实现垂直对齐。