HTML中通过CSS的vertical-align属性控制行内元素垂直对齐，其取值包括baseline、top、middle、bottom、sub、super、length和percentage，分别用于基线对齐、顶部对齐、居中对齐、底部对齐、下标、上标及具体数值或百分比偏移；该属性适用于inline和inline-block元素，对表格单元格有效，但不适用于块级元素；常用于解决图片底部空白问题，通过设置vertical-align为bottom或display为block消除基线留白；vertical-align的百分比值基于line-height计算，调整时需协调两者关系以实现精确布局。
HTML设置文本垂直对齐主要依赖于CSS的
vertical-align属性，它允许你控制行内元素（如文本、图片等）相对于其父元素或其他行内元素的垂直位置。理解这个属性对于精确控制页面布局至关重要。
解决方案：
vertical-align属性有多种取值，每种取值都有其特定的应用场景。以下是一些常用的取值及其用法：
-
baseline
: 默认值。元素基线与父元素的基线对齐。对于文本来说，基线通常是字母底部的位置。立即学习“前端免费学习笔记（深入）”；
<p>This is <span style="vertical-align: baseline;">baseline</span> text.</p>
-
top
: 元素顶部与其所在行的顶部对齐。<p>This is <span style="vertical-align: top;">top</span> text.</p>
-
middle
: 元素垂直居中于父元素。<p>This is <span style="vertical-align: middle;">middle</span> text.</p>
-
bottom
: 元素底部与其所在行的底部对齐。<p>This is <span style="vertical-align: bottom;">bottom</span> text.</p>
-
sub
: 元素显示为下标。<p>This is <span style="vertical-align: sub;">sub</span> text.</p>
-
super
: 元素显示为上标。<p>This is <span style="vertical-align: super;">super</span> text.</p>
-
length
: 使用固定的长度值（如px
、em
）来精确调整元素的垂直位置。正值使元素升高，负值使元素降低。<p>This is <span style="vertical-align: 10px;">10px up</span> text.</p> <p>This is <span style="vertical-align: -5px;">5px down</span> text.</p>
-
percentage
: 使用百分比来调整元素的垂直位置。百分比相对于line-height
计算。正值使元素升高，负值使元素降低。<p style="line-height: 20px;">This is <span style="vertical-align: 50%;">50% up</span> text.</p>
vertical-align
对inline
、inline-block
和table-cell
元素的影响有什么不同？
vertical-align主要影响行内元素和表格单元格。对于
inline元素，如
<span>，
vertical-align直接调整元素相对于其所在行的垂直位置。对于
inline-block元素，
vertical-align的行为类似，但由于
inline-block可以设置宽高，其对齐方式可能更直观。
表格单元格（
<td>或
<th>）的
vertical-align属性控制单元格内容在其内部的垂直对齐方式。这与行内元素的行为有所不同，因为表格单元格有明确的高度。
一个常见的误解是
vertical-align可以用于块级元素（如
<div>）。实际上，
vertical-align对块级元素无效。要垂直居中块级元素，通常需要使用其他CSS技术，比如Flexbox或Grid布局。
如何使用vertical-align
解决图片底部空白问题？
图片底部空白问题通常是由于图片作为行内元素时，其基线与文本基线对齐造成的。在图片下方会留出一点空间，用于容纳字母的下伸部分（如
g、
p）。
要解决这个问题，可以将图片的
vertical-align属性设置为
top、
middle或
bottom，或者将图片设置为块级元素（
display: block;）。
<img src="image.jpg" style="vertical-align: bottom;" alt="Image">
或者：
<img src="image.jpg" style="display: block;" alt="Image">
这两种方法都可以消除图片底部的空白。具体选择哪种方法取决于你的布局需求。将图片设置为块级元素可能会影响其周围元素的布局，因此需要根据实际情况进行调整。
vertical-align
与line-height
之间有什么关系？如何正确设置？
vertical-align的百分比值是相对于
line-height计算的。这意味着，如果
line-height的值发生变化，
vertical-align的实际偏移量也会随之改变。
正确设置
vertical-align和
line-height需要理解它们之间的关系。通常，如果使用百分比作为
vertical-align的值，应该确保
line-height的值是可预测的，以便精确控制元素的垂直位置。
例如，如果设置
vertical-align: 50%;，并且
line-height: 20px;，那么元素将向上偏移10px。如果
line-height变为
30px，元素将向上偏移15px。
在实际应用中，应该根据具体的设计需求来调整
vertical-align和
line-height的值，以达到最佳的视觉效果。
