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

Question

我想在 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://stackoverflow.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。

Answer 1

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

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

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