为什么 line-height 可以让内联元素“垂直居中”
理解 line-height 和内联元素的基本概念。line-height 在 CSS 中用于定义文本行基线之间的距离。它实际上包含了文字本身的高度以及上下的间距部分。内联元素如、<a>等在文档流中是按照文本的顺序依次排列的，其高度默认由内容决定，且在垂直方向上基于文本的基线、底线、顶线等排列。line-height 与内联元素垂直居中的关系原理。当多个内联元素或文本在一行时构成行框盒子，其高度由最高的 line-height 值决定。每个内联元素有基线，设置 line-height 后文本依基线排列。若内联元素高度小于 line-height 值，剩余空间在文字上下分配，从而实现垂直居中。例如文字字体大小 12px，line-height 20px，文字上下各有 (20 - 12)/2 = 4px 空白空间。示例说明。假设有内联元素含文本 “Hello”。初始样式仅设字体大小和背景色时，元素高度由字体大小决定。添加 line-height 后，若其大于字体大小，文字在该空间垂直居中并上下有相应空白。注意事项。不同字体因内部结构和高度比例不同，即使相同 line-height 也可能呈现不同垂直居中效果。同时若存在其他 CSS 属性，也可能干扰 line-height 使内联元素垂直居中的效果。
line-height
首先是数字值（unitless number）。当把 line - height 设置为一个无单位的数字时，它代表的是一个相对倍数。这个倍数会与元素自身的 font - size 进行相乘运算，以此来确定实际的行高。例如，若某元素的 font - size 设定为 16px，而 line - height 被设置为 1.5，那么经过计算可得实际的行高为 16px * 1.5 = 24px。这种数字值的设置方式在响应式网页设计领域发挥着极为重要的作用。在当今多样化的设备环境下，用户可能会根据自身需求在浏览器中调整字体大小。当使用数字值作为 line - height 的设置时，由于其与 font - size 之间的相对比例关系，一旦字体大小发生改变，行高会依据该比例自动进行相应的调整。这就确保了在不同字体大小设置下，文本行之间的间距能够始终维持在一个相对协调、美观且适宜阅读的比例状态。比如在一个综合性的新闻网站或者博客平台的文章内容展示区域，用户可能因视力差异或者阅读习惯而改变字体大小，采用数字值的 line - height 就能有效避免因字体大小变动而导致的行间距混乱问题，使整个文本排版始终保持良好的视觉效果和阅读体验。
其次是长度值（length）。长度值又可细分为绝对长度单位和相对长度单位。绝对长度单位常见的有 px（像素）、pt（点）等。当使用绝对长度单位来设置 line - height 时，行高就被固定为所设定的精确长度数值。例如，当 line - height 被指定为 20px 时，无论元素的 font - size 如何变化，行高都将恒定为 20 像素。这种特性使得绝对长度单位在那些需要对行高进行精准把控的特定设计场景中具有无可替代的作用。例如在设计一些具有严格布局规范的表单元素时，为了确保表单内各项文本内容的整齐排列以及与其他表单部件（如输入框、按钮等）之间的精确间距配合，使用绝对长度单位的 line - height 能够实现极为精确的布局效果。同样，在小型的文本提示框设计中，为了使提示信息在有限的空间内以特定的行高呈现，保证视觉上的紧凑与整洁，绝对长度单位也是理想的选择。相对长度单位则主要包括 em 和 rem 等。其中 em 是相对于元素自身的 font - size 进行计算的。假设一个元素的 font - size 为 16px，若 line - height 被设置为 1.2em，那么其行高计算结果就是 16px * 1.2 = 19.2px。相对长度单位的优势在于它能够很好地与元素自身或者其他相关元素的字体大小建立起一种动态的关联关系。例如在一个包含标题和正文的文本区域中，标题的字体大小通常与正文有所不同。通过使用相对长度单位的 line - height 来设置标题的行高，能够使其与标题自身的字体大小形成合理的比例关系，同时在正文字体大小发生变化（如用户调整整体文本缩放比例）时，标题的行高也能相应地进行适配性调整，从而在整个文本区域内保持一种和谐统一的排版风格。
内联元素 inline-height 的大值特性
内联元素的 “大值特性” 是指当多个内联元素共处一行且 line - height 值不同时，此行的行框盒子高度由 line - height 值最大的内联元素决定。例如有 line - height 为 20px 的元素和 30px 的<a>元素在同一行，行框盒子高度就是 30px。行框盒子是包含一行内联元素的虚拟盒子，其高度决定垂直方向占据空间。浏览器渲染时计算内联元素 line - height 并组合成行框盒子，为容纳 line - height 最大元素确定行框盒子高度，且内联元素基于基线对齐，依最大 line - height 元素调整行框盒子高度并对齐基线保证视觉一致。假设有内联元素 1内联元素 2，因第二个元素 line - height 大，行框盒子高 24px，第一个元素在其中依基线对齐且上方有空白。在排版网页文章段落等复杂文本时，了解此特性可控制文本行高度与垂直对齐方式，如突出文字设大 line - height 时要考虑对同行元素影响。使用时要注意元素间视觉平衡，line - height 过大可能致同行元素不协调或行间距大，还要考虑 vertical - align 等其他 CSS 属性影响。
vertical-align
vertical - align 是 CSS 属性，用于控制内联元素或表格单元格在垂直方向的对齐方式，适用于内联元素、表格元素及内联块元素。其值有多种类型。关键字类型的值有不同效果。baseline 是默认值，内联元素以其基线与父元素基线对齐，如文本与图像在段落中，图像底部基线与文本基线对齐。middle 使内联元素垂直中点与父元素基线加父元素 x - height 一半位置对齐，像图像设 vertical - align: middle 与文字同行时，图像中心大致与文字中心位置对齐。top 让内联元素顶部与行框盒子顶部对齐，多个设 top 的内联元素顶部在同一水平线。bottom 使内联元素底部与行框盒子底部对齐，多个设 bottom 的元素底部在同一水平线。长度值和百分比类型的值也有相应效果。
vertical-align作用的前提
vertical - align 主要作用于内联元素和内联块元素，像、<a>、<img>等，还有通过 display: inline - block 设置的元素，这些元素按文本排列方式布局，vertical - align 可精细控制垂直方向对齐。也适用于表格布局中的<td>和<th>元素，用于控制表格单元格内容垂直对齐。对于内联元素和内联块元素，基于行框盒子概念，多个内联元素在一行构成行框盒子，在这个盒子的上下文中 vertical - align 发挥作用，调整元素相对于行框盒子位置。在表格布局中，是在表格单元格布局上下文中起作用，根据单元格边界和内容确定对齐效果。如果元素被设为绝对定位或固定定位，vertical - align 对内联元素垂直对齐作用通常会失去，不过在复杂场景中可能会有其他情况。
理解 line-height 和内联元素的基本概念。line-height 在 CSS 中用于定义文本行基线之间的距离。它实际上包含了文字本身的高度以及上下的间距部分。内联元素如、<a>等在文档流中是按照文本的顺序依次排列的，其高度默认由内容决定，且在垂直方向上基于文本的基线、底线、顶线等排列。line-height 与内联元素垂直居中的关系原理。当多个内联元素或文本在一行时构成行框盒子，其高度由最高的 line-height 值决定。每个内联元素有基线，设置 line-height 后文本依基线排列。若内联元素高度小于 line-height 值，剩余空间在文字上下分配，从而实现垂直居中。例如文字字体大小 12px，line-height 20px，文字上下各有 (20 - 12)/2 = 4px 空白空间。示例说明。假设有内联元素含文本 “Hello”。初始样式仅设字体大小和背景色时，元素高度由字体大小决定。添加 line-height 后，若其大于字体大小，文字在该空间垂直居中并上下有相应空白。注意事项。不同字体因内部结构和高度比例不同，即使相同 line-height 也可能呈现不同垂直居中效果。同时若存在其他 CSS 属性，也可能干扰 line-height 使内联元素垂直居中的效果。
line-height
首先是数字值（unitless number）。当把 line - height 设置为一个无单位的数字时，它代表的是一个相对倍数。这个倍数会与元素自身的 font - size 进行相乘运算，以此来确定实际的行高。例如，若某元素的 font - size 设定为 16px，而 line - height 被设置为 1.5，那么经过计算可得实际的行高为 16px * 1.5 = 24px。这种数字值的设置方式在响应式网页设计领域发挥着极为重要的作用。在当今多样化的设备环境下，用户可能会根据自身需求在浏览器中调整字体大小。当使用数字值作为 line - height 的设置时，由于其与 font - size 之间的相对比例关系，一旦字体大小发生改变，行高会依据该比例自动进行相应的调整。这就确保了在不同字体大小设置下，文本行之间的间距能够始终维持在一个相对协调、美观且适宜阅读的比例状态。比如在一个综合性的新闻网站或者博客平台的文章内容展示区域，用户可能因视力差异或者阅读习惯而改变字体大小，采用数字值的 line - height 就能有效避免因字体大小变动而导致的行间距混乱问题，使整个文本排版始终保持良好的视觉效果和阅读体验。
其次是长度值（length）。长度值又可细分为绝对长度单位和相对长度单位。绝对长度单位常见的有 px（像素）、pt（点）等。当使用绝对长度单位来设置 line - height 时，行高就被固定为所设定的精确长度数值。例如，当 line - height 被指定为 20px 时，无论元素的 font - size 如何变化，行高都将恒定为 20 像素。这种特性使得绝对长度单位在那些需要对行高进行精准把控的特定设计场景中具有无可替代的作用。例如在设计一些具有严格布局规范的表单元素时，为了确保表单内各项文本内容的整齐排列以及与其他表单部件（如输入框、按钮等）之间的精确间距配合，使用绝对长度单位的 line - height 能够实现极为精确的布局效果。同样，在小型的文本提示框设计中，为了使提示信息在有限的空间内以特定的行高呈现，保证视觉上的紧凑与整洁，绝对长度单位也是理想的选择。相对长度单位则主要包括 em 和 rem 等。其中 em 是相对于元素自身的 font - size 进行计算的。假设一个元素的 font - size 为 16px，若 line - height 被设置为 1.2em，那么其行高计算结果就是 16px * 1.2 = 19.2px。相对长度单位的优势在于它能够很好地与元素自身或者其他相关元素的字体大小建立起一种动态的关联关系。例如在一个包含标题和正文的文本区域中，标题的字体大小通常与正文有所不同。通过使用相对长度单位的 line - height 来设置标题的行高，能够使其与标题自身的字体大小形成合理的比例关系，同时在正文字体大小发生变化（如用户调整整体文本缩放比例）时，标题的行高也能相应地进行适配性调整，从而在整个文本区域内保持一种和谐统一的排版风格。
内联元素 inline-height 的大值特性
内联元素的 “大值特性” 是指当多个内联元素共处一行且 line - height 值不同时，此行的行框盒子高度由 line - height 值最大的内联元素决定。例如有 line - height 为 20px 的元素和 30px 的<a>元素在同一行，行框盒子高度就是 30px。行框盒子是包含一行内联元素的虚拟盒子，其高度决定垂直方向占据空间。浏览器渲染时计算内联元素 line - height 并组合成行框盒子，为容纳 line - height 最大元素确定行框盒子高度，且内联元素基于基线对齐，依最大 line - height 元素调整行框盒子高度并对齐基线保证视觉一致。假设有内联元素 1内联元素 2，因第二个元素 line - height 大，行框盒子高 24px，第一个元素在其中依基线对齐且上方有空白。在排版网页文章段落等复杂文本时，了解此特性可控制文本行高度与垂直对齐方式，如突出文字设大 line - height 时要考虑对同行元素影响。使用时要注意元素间视觉平衡，line - height 过大可能致同行元素不协调或行间距大，还要考虑 vertical - align 等其他 CSS 属性影响。
vertical-align
vertical - align 是 CSS 属性，用于控制内联元素或表格单元格在垂直方向的对齐方式，适用于内联元素、表格元素及内联块元素。其值有多种类型。关键字类型的值有不同效果。baseline 是默认值，内联元素以其基线与父元素基线对齐，如文本与图像在段落中，图像底部基线与文本基线对齐。middle 使内联元素垂直中点与父元素基线加父元素 x - height 一半位置对齐，像图像设 vertical - align: middle 与文字同行时，图像中心大致与文字中心位置对齐。top 让内联元素顶部与行框盒子顶部对齐，多个设 top 的内联元素顶部在同一水平线。bottom 使内联元素底部与行框盒子底部对齐，多个设 bottom 的元素底部在同一水平线。长度值和百分比类型的值也有相应效果。
vertical-align作用的前提
vertical - align 主要作用于内联元素和内联块元素，像、<a>、<img>等，还有通过 display: inline - block 设置的元素，这些元素按文本排列方式布局，vertical - align 可精细控制垂直方向对齐。也适用于表格布局中的<td>和<th>元素，用于控制表格单元格内容垂直对齐。对于内联元素和内联块元素，基于行框盒子概念，多个内联元素在一行构成行框盒子，在这个盒子的上下文中 vertical - align 发挥作用，调整元素相对于行框盒子位置。在表格布局中，是在表格单元格布局上下文中起作用，根据单元格边界和内容确定对齐效果。如果元素被设为绝对定位或固定定位，vertical - align 对内联元素垂直对齐作用通常会失去，不过在复杂场景中可能会有其他情况。
