HTML如何设置文本垂直对齐？vertical-align属性的用法是什么？

坦率地说，CSS的vertical-align属性控制着文本和图像等内联元素的垂直对齐方式。
这个问题很复杂，需要澄清几个基本点。

我们先来说说最重要的事情。
垂直对齐支持多种值，例如基本字体（默认，字符底部对齐），顶部、中心和底部等基本对齐方法，以及上标/下标效果，以及使用 px/em/percentage 进行位置微调。
去年我们跑这个项目的时候，使用百分比对齐是非常容易的，但是前提是行高要恒定。
例如，当line-height: 2 0px和vertical-align: 5 0%稍微高于中心一点时——很多人没有注意到这一点，认为百分比与整个页面的高度有关。

另一点是垂直对齐，主要适用于行内项目和表格单元格。
去年，我们处理了表格单元格内容未对齐的错误。
我们发现这是由于在div中错误地使用垂直对齐导致的。
说实话，这很令人沮丧。
后来发现不对劲，就改用Flexbox来修复。
还有一个非常重要的细节。
使用vertical-align:bottom来解决图像底部空白的问题是很常见的，但这取决于场景。
如果是重要图像，直接使用view:block是安全的。

一开始我认为百分比对齐是最灵活的，但后来我发现表格单元格垂直对齐的行为完全不同。
等等，还有别的事。
内联块元素响应垂直对齐方式与inline相同，但宽度和高度可以调整，对齐效果更直观。

Flexbox 建议用于复杂的垂直居中问题，除非只是简单的文本或图像对齐。

HTML中span标签内图片与文本如何垂直底部对齐？

直接使用vertical-align:bottom来对齐图片和文字的底部。

只需将此属性添加到包含图像的区域即可。

简单示例：
HTML： 示例文本
CSS： .align-bottom img { 垂直对齐：底部； }
或者直接添加span：
.span { 垂直对齐：底部； 显示：内联块；
这样图片的底部就与文字对齐了，简单直接。

使用Flexbox实现图片与多行文本的垂直居中对齐

老实说，我在使用 Flexbox 垂直居中图像和文本时也遇到了麻烦。
你提供的代码很清楚，但我想补充一些关于我自己风险的经验，这可能有点冗长。

我记得第一次使用 Flexbox 来完成这项工作时，我将图像拖放到 div 中，然后将其直接拉伸到 div 中，并添加了align-items:center。
结果发现文字在中间，但图像要么填满了容器，要么太干看不清楚。
后来我才意识到我应该为图像设置一个单独的高度，最好与字体大小相关。
看一下.containerimg{height:1 .2 em;这句话在你的代码中。
这是一个技巧——使用字体大小作为标准。
这个技巧是我跟CSS高手学的，用起来很稳定。

有趣的是行高。
一开始，我一直希望文本居中，所以我必须将行高设置为奇数，例如0.8 后来我发现这个东西非常敏感，改变1 个像素就可能导致对齐倾斜。
我正在从事一个金融项目，客户要求在像素级别上完美对齐。
最后，我将线高从0.7 5 调整到0.7 7 ，仅代表2 %的变化，效果立即正确。
所以你所说的“根据实际情况进行调整”尤其正确。

还有一个细节我差点忘了，那就是图像的长宽比。
你的例子中的图片是正方形的。
如果将其更改为正常比例，例如 1 6 :9 横幅图像，它可能会因高度：1 .2 em 而发生扭曲。
我有一个电子商务客户，其产品图片是方形的，但是当添加到这个布局中时，它们挤在一起。
最后，我向图像添加了 max-width:1 00% 和 object-fit:contain ，仅此而已。
这个你的代码中没有写，但是实际使用的时候需要注意一下。

兼容性也正确。
当我接手一个旧网站时，IE1 1 仍然拥有大量用户。
Flexbox 在那里完成了一半，所以我最终添加了编写视图的旧方法：-ms-flexbox，它有点难看但仍然可用。
浏览器现在已经改进，但您仍然应该有备份计划。

最后，还有一个小知识：间隙不能与边距混淆。
我早期写代码的时候经常犯这样的错误。
我用了一段时间的gap，然后又改回margin。
结果，计划变得一团糟。
后来我发现这个差距是针对Flexbox的，它是专为完成这项工作而设计。
保证金是旧国家标准，所以不要混用。

你写的代码是完全完整的，但是在训练过程中你可能要反复调整精细的参数。
最近做项目的时候我也发现了一个坑。
有些浏览器对行高分析非常严格。
有时使用像素比直接使用 em 更好。
这取决于具体情况。
我还没有亲自测试过这方面的所有浏览器。
我记得 Chrome 和 Firefox 在数据方面表现更好。
Safari需要添加-webkit-前缀，但我没有仔细测试过。
我建议你检查一下。