有没有办法将文本与 CSS 内容属性（chrome）中的图像垂直对齐？

Posted 2023-03-05

【中文标题】有没有办法将文本与 CSS 内容属性（chrome）中的图像垂直对齐？

【英文标题】：Is there a way to vertically align text with an image in the CSS content property (chrome)?

【发布时间】：2021-03-08 15:54:36

【问题描述】：

我想在 before 伪元素中垂直对齐图像旁边的文本。

它现在的工作方式是我的图像显示在我的文本左侧，但图像和文本都位于同一基线上。我尝试使用vertical-align，但没有成功。我认为问题在于内容将图像和文本都视为一个块元素。

* 
  margin: 0;
  padding: 0;


body 
  background-color: #000000;


header 
  background-color: #202830;
  color: #ffffff;
  width: 100%;


header::before 
  align-items: center;
  background-color: #581845;
  color: #E88968;
  justify-content: center;
  content: url("https://***.com/favicon.ico") " This is some text";
  display: flex;
  height: 72px;
  width: 100%;


p 
  padding: 16px;

<header>

  <p>This is my header</p>

</header>

在sn-p中，可以看到“This is some text”与图片的基线对齐。我希望它以图像为中心。

更新：此代码适用于 Windows 10 上的 Firefox 82.0.3（32 位），但不适用于 Windows 10 上的 Chrome 86.0.4240.198（64 位）或 Edge 87.0.664.47（64 位） Windows 10。

【问题讨论】：

这里有一个指向小提琴的链接，所以你可以看到问题：jsfiddle.net/3w4cp087

jsfiddle.net/1cpLv23f 看起来不错？？ i.stack.imgur.com/LncfJ.jpg

@G-Cyrillus 它在元素中居中，但我希望文本垂直对齐以与 Stack Overflow 图标居中。现在文本与图标的基线对齐。

i.stack.imgur.com/LncfJ.jpg 这是你看到的吗？如果没有，你用的是什么浏览器？

这就是我想看到的，但在我的浏览器 Chrome 版本 86.0.4240.198（官方版本）（64 位）Windows 10 中，我仍然看到与基线对齐的文本。它在 Firefox 中运行良好。

【参考方案1】：

通过使用 ::before 选择器，您无法对齐内容，因为图像和文本都在内容属性中一个接一个地使用。 除了使用 ::before 选择器，您可以尝试将图像和文本分别放在 html 中的 div 标记中，然后您可以使用 css 中的 position 和 top 属性单独对齐文本或图像。

如果对您有某种严格的指示，您必须使用 ::before 选择器，我很遗憾地说您不能这样对齐您的内容。

另一种方法：您可以尝试通过在徽标下方裁剪图像（如果有）中的一些额外空白空间来编辑图片。

【讨论】：

这就是我的想法，然而，有趣的是，Firefox 将图像和文本视为两个独立的元素。只是 Chrome 和 Edge 将它们视为一体。