Javascript CSS-在（任何）html文本中的特定单词上方注入和对齐图像，而不会破坏文本流

我的目标是动态地（使用内容脚本）在任何页面的文本上方注入图像，并保持文本正常对齐。我在图像中插入的单词周围有一个带有特定属性的span，我的脚本（chrome扩展的内容脚本）将该span与另一个span（css中的父级）包装在一起，该span也包含img（包装在自己的span中）

问题（CSS问题）是当我注入图像时，文本的文本衬里被破坏了

你可以更清楚地看到这一切

“a Good”一词没有与正文的其余部分对齐

下面是我现在使用内嵌flex和flex direction所做的工作：

HTML示例：

使用CSS（也注入）：

对于环绕img（在跨距内）和文本（也在其自身跨距内）的跨距：

.aui\u页面中的顶部\u父项{
显示：内联flex；
弯曲方向：立柱；
位置：相对位置；
z指数：9999999；
利润率：1%；
}

对于仅包裹img的内跨：

.aui_top_in_page {
  font-size: 14px;
  font-weight: regular;
  overflow: visible;
  padding: 0px 0px 0px;
  color: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  text-align: center;
  text-decoration: none;
  z-index: 99999999;
  align-items: center;
}

在这里，您可以清楚地看到这一切：

---

我希望当图像位于“标记”的文字上方时，线条和文字保持在一条直线上，并且这些图像将与上面的文本行保持足够的间距，以便清楚显示img所指的是哪个文字。

如果删除1%的上下边距，您可以使用垂直对齐下边距：

.aui\u页面中的顶部\u父项{
显示：内联flex；
弯曲方向：立柱；
位置：相对位置；
z指数：9999999；
边距：0 1%；/*将此更改为仅边边距*/
垂直对齐：底部；/*添加此项*/
}
.aui_页面中的顶部{
字体大小：14px；
字体大小：常规；
溢出：可见；
填充：0px 0px 0px；
颜色：#fff；
-webkit边界半径：7px；
-moz边界半径：7px；
边界半径：7px；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
利润底部：20%；
文本对齐：居中；
文字装饰：无；
z指数：9999999；
对齐项目：居中；
}

---

如果删除1%的上下边距，则可以使用垂直对齐下边距：

.aui\u页面中的顶部\u父项{
显示：内联flex；
弯曲方向：立柱；
位置：相对位置；
z指数：9999999；
边距：0 1%；/*将此更改为仅边边距*/
垂直对齐：底部；/*添加此项*/
}
.aui_页面中的顶部{
字体大小：14px；
字体大小：常规；
溢出：可见；
填充：0px 0px 0px；
颜色：#fff；
-webkit边界半径：7px；
-moz边界半径：7px；
边界半径：7px；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
利润底部：20%；
文本对齐：居中；
文字装饰：无；
z指数：9999999；
对齐项目：居中；
}

---

我找到了解决办法

我对HTML和CSS文件做了一些更改，如下所示

添加

span

tag

a Good

以及css文件中的一些更改

.aui\u页面中的顶部\u父项{
显示器：flex；
弯曲方向：立柱；
/*位置：相对位置*/
对齐项目：居中；
保证金：0；
证明内容：柔性端；
保证金：5px；
}
a{
显示器：flex；
弯曲方向：行；
}
.aui_页面中的顶部{
字体大小：14px；
字体大小：常规；
溢出：可见；
填充：0px 0px 0px；
颜色：#fff；
-webkit边界半径：7px；
-moz边界半径：7px；
边界半径：7px；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
页边距底部：0；
文本对齐：居中；
文字装饰：无；
z指数：9999999；
对齐项目：居中；
}

---

我找到了解决办法

我对HTML和CSS文件做了一些更改，如下所示

添加

span

tag

a Good

以及css文件中的一些更改

.aui\u页面中的顶部\u父项{
显示器：flex；
弯曲方向：立柱；
/*位置：相对位置*/
对齐项目：居中；
保证金：0；
证明内容：柔性端；
保证金：5px；
}
a{
显示器：flex；
弯曲方向：行；
}
.aui_页面中的顶部{
字体大小：14px；
字体大小：常规；
溢出：可见；
填充：0px 0px 0px；
颜色：#fff；
-webkit边界半径：7px；
-moz边界半径：7px；
边界半径：7px；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
页边距底部：0；
文本对齐：居中；
文字装饰：无；
z指数：9999999；
对齐项目：居中；
}

---

图像大小最终应该由文本的字体大小决定，但目前它们的高度和宽度是固定的。我更新了小提琴的方式，图像大小最终应该由文本的字体大小决定，但现在它们的高度和宽度是固定的。顺便说一下，我更新了小提琴