javascript - CSS-在(任何)html 文本中的某些单词上方注入(inject)和对齐图像，而不会破坏文本流

Question

我的目标是动态地(使用内容脚本)在基本上任何页面的文本上方插入图像，并保持文本正常对齐。我注入(inject)图像的单词在它们周围有一个具有特定属性的跨度，我的脚本(chrome 扩展的内容脚本)用另一个具有 img 的跨度(我的 css 中的父级)包装这个跨度(包装在自己的跨度)。

问题(CSS 问题)是当我注入(inject)图像时，文本的文本衬里被破坏了。

您可以在 https://jsfiddle.net/wyfumrx6/2/ 中更清楚地看到这一切

“a Good”一词未与文本的其余部分对齐。

这是我现在所做的，使用 inline-flex 和 flex-direction:

HTML 示例:

<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */">
  <span id="div0" class="aui_top_in_page_parent" tabindex="0" style="">
        <span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png"
                class="aui_header_images"></span>
  <span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How
        </span>
  </span>
  <span id="div5" class="aui_top_in_page_parent" tabindex="0">
        <span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png"
                class="aui_header_images"></span>
  <span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span></span> <span id="div6" class="aui_top_in_page_parent" tabindex="0"><span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png"
                class="aui_header_images"></span><span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make</span></span>
  a Good <span id="div7" class="aui_top_in_page_parent" tabindex="0"><span id="span7" class="aui_top_in_page"><img
                src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span><span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span></span>
</a>

使用 CSS(也注入(inject)):

对于包裹 img(在一个 span 内)和文本(也在它自己的 span 内)的 span:

.aui_top_in_page_parent {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  z-index: 99999999;
  margin: 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;
}

通过这里的结果可以清楚地看到这一切: https://jsfiddle.net/wyfumrx6/

我希望线条和文字在图像位于“标记”文字上方时保持直线，并且该图像与上面的文本行有足够的边距，以便清楚 img 是哪个文字引用。

Answer 1

如果移除 1% 的顶部和底部边距，则可以只使用垂直对齐底部:

.aui_top_in_page_parent {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  z-index: 99999999;
  margin: 0 1%;             /* change this to side margin only */
  vertical-align: bottom;   /* add this */
}

.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;
  margin-bottom: 20%;
  text-align: center;
  text-decoration: none;
  z-index: 99999999;
  align-items: center;
}

<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */" class="container">
  <span id="div0" class="aui_top_in_page_parent" tabindex="0" style="
">
    <span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png" class="aui_header_images"></span>
    <span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How</span>
  </span>
  <span id="div5" class="aui_top_in_page_parent" tabindex="0">
    <span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png" class="aui_header_images"></span>
    <span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span>
  </span>
  <span id="div6" class="aui_top_in_page_parent" tabindex="0">
    <span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png" class="aui_header_images"></span>
    <span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make </span>
  </span>
  a Good
  <span id="div7" class="aui_top_in_page_parent" tabindex="0">
    <span id="span7" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span>
    <span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span>
  </span>
</a>

Updated fiddle