垂直居中位置绝对元素内联

Question

我正在尝试插入一堆不在流程之外但与内联元素垂直对齐的元素。

这是我想要实现的结果（是的，它很丑陋，但希望它有助于解决问题）。

HTML 以一堆<span>bigger</span>元素开始。每个<span>HTML 模板中都会插入一个红色箭头 (⬅)。我希望红色箭头垂直对齐到 的中间<span>。“更大”具有两种颜色背景的原因是为了清楚垂直中间在哪里。箭头需要与中间垂直对齐。

下面是迄今为止不起作用的代码。为了实现我的目标，我只能更改下面的 CSS/* only change css below this line */和<template>HTML。重点是我无法针对每种情况对高度进行硬编码。溶液必须是流体。

PS：我不在乎“和”。我只关心箭头指向其相应“更大”的中间

/* do not change any JavaScript */

const template = document.querySelector('#arrow');

document.querySelectorAll('span').forEach(elem => {

  const child = template.content.cloneNode(true).children[0];

  elem.appendChild(child);

});

.f1 { font-size: 10pt; }

.f2 { font-size: 15pt; }

.f3 { font-size: 25pt; }

.f4 { font-size: 30pt; }

.f5 { font-size: 35pt; }

.f6 { font-size: 40pt; }

.f7 { font-size: 45pt; }

.f8 { font-size: 50pt; }

.f9 { font-size: 55pt; }

.f10 { font-size: 60pt; }

.f11 { font-size: 65pt; }

.f12 { font-size: 70pt; }

/* only change css below this line */

.f {

  background: linear-gradient(#e66465 50%, #9198e5 50%);

  display: inline-block;

  position: relative;

}

.arrow {

  position: absolute;

  right: 0;

  top: 0;

  display: inline-block;

}

.arrow>div:before {

  content: 'f';

  color: rgba(0,0,0,0);

}

.arrow>div {

  position: absolute;

  left: 0;

  top: 0;

}

.arrow>div>div {

  position: absolute;

  bottom: 0;

  color: rgba(255, 0, 0, 0.5);

  font-size: 20pt;

}

<p>

Alice drank the potion and she got 

<span class="f f1">bigger</span> and 

<span class="f f2">bigger</span> and 

<span class="f f3">bigger</span> and 

<span class="f f4">bigger</span> and 

<span class="f f5">bigger</span> and 

<span class="f f6">bigger</span> and 

<span class="f f7">bigger</span> and 

<span class="f f8">bigger</span> and 

<span class="f f9">bigger</span> and 

<span class="f f10">bigger</span> and 

<span class="f f11">bigger</span> and 

<span class="f f12">bigger</span> and 

</p>

<!-- only change html below this line -->

<template id="arrow">

  <div class="arrow">

    <div>

      <div>⬅</div>

    </div>

  </div>

</template>

Answer 1

这是我的结果通过添加另一个可以是任何东西的盒子，在本例中<a>我能够创建一个弹性盒子。&nbsp; const template = document.querySelector('#arrow');document.querySelectorAll('span').forEach(elem => {&nbsp; const child = template.content.cloneNode(true).children[0];&nbsp; elem.appendChild(child);});.f1 { font-size: 10pt; }.f2 { font-size: 15pt; }.f3 { font-size: 25pt; }.f4 { font-size: 30pt; }.f5 { font-size: 35pt; }.f6 { font-size: 40pt; }.f7 { font-size: 45pt; }.f8 { font-size: 50pt; }.f9 { font-size: 55pt; }.f10 { font-size: 60pt; }.f11 { font-size: 65pt; }.f12 { font-size: 70pt; }/* only change css below this line */.f {&nbsp; background: linear-gradient(#e66465 50%, #9198e5 50%);&nbsp; display: inline-block;&nbsp; position: relative;}.arrow {&nbsp; position: absolute;&nbsp; right: 0;&nbsp; top: 0;&nbsp; display: inline-block;}.arrow>div:before {&nbsp; content: 'f';&nbsp; color: rgba(0,0,0,0);}.arrow>div {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;}.arrow>div>div {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; color: rgba(255, 0, 0, 0.5);&nbsp; font-size: 20pt;}&nbsp;/*------------------Only added css bellow---------------------*/.arrow div div{&nbsp; height: 100%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}<p>Alice drank the potion and she got<span class="f f1">bigger</span> and<span class="f f2">bigger</span> and<span class="f f3">bigger</span> and<span class="f f4">bigger</span> and<span class="f f5">bigger</span> and<span class="f f6">bigger</span> and<span class="f f7">bigger</span> and<span class="f f8">bigger</span> and<span class="f f9">bigger</span> and<span class="f f10">bigger</span> and<span class="f f11">bigger</span> and<span class="f f12">bigger</span> and</p><!-- only change html below this line --><template id="arrow">&nbsp; <div class="arrow">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <div><a>⬅</a></div>&nbsp; &nbsp; </div>&nbsp; </div></template>唯一添加的CSS.arrow div div{&nbsp; height: 100%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}

Answer 2

我会跳过 javascript 和.arrowelements 并使用 CSS 伪元素。.f::after {&nbsp; content: "⬅";&nbsp; color: rgba(255, 0, 0, 0.5);&nbsp; font-size: 20pt;&nbsp; position: absolute;&nbsp; display: inline-block;&nbsp; right: -22pt;&nbsp; top: 50%;&nbsp; transform: translateY(-50%);}我使用绝对位置来确保文档流不受影响。我将元素向右拉，使其不重叠，然后将top: 50%; transform: translateY(-50%)其垂直居中（顶部相对于包含.f元素，平移相对于伪元素的大小）。/* do not change any JavaScript */const template = document.querySelector('#arrow');document.querySelectorAll('span').forEach(elem => {&nbsp; const child = template.content.cloneNode(true).children[0];&nbsp; elem.appendChild(child);});.f1 { font-size: 10pt; }.f2 { font-size: 15pt; }.f3 { font-size: 25pt; }.f4 { font-size: 30pt; }.f5 { font-size: 35pt; }.f6 { font-size: 40pt; }.f7 { font-size: 45pt; }.f8 { font-size: 50pt; }.f9 { font-size: 55pt; }.f10 { font-size: 60pt; }.f11 { font-size: 65pt; }.f12 { font-size: 70pt; }/* only change css below this line */.f {&nbsp; background: linear-gradient(#e66465 50%, #9198e5 50%);&nbsp; display: inline-block;&nbsp; position: relative;}.f::after {&nbsp; content: "⬅";&nbsp; color: rgba(255, 0, 0, 0.5);&nbsp; font-size: 20pt;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp; display: inline-block;&nbsp; right: 0;&nbsp; top: 50%;&nbsp; padding-left: 2px;&nbsp; transform: translateX(100%) translateY(-50%);}<p>Alice drank the potion and she got&nbsp;<span class="f f1">bigger</span> and&nbsp;<span class="f f2">bigger</span> and&nbsp;<span class="f f3">bigger</span> and&nbsp;<span class="f f4">bigger</span> and&nbsp;<span class="f f5">bigger</span> and&nbsp;<span class="f f6">bigger</span> and&nbsp;<span class="f f7">bigger</span> and&nbsp;<span class="f f8">bigger</span> and&nbsp;<span class="f f9">bigger</span> and&nbsp;<span class="f f10">bigger</span> and&nbsp;<span class="f f11">bigger</span> and&nbsp;<span class="f f12">bigger</span> and&nbsp;</p><!-- only change html below this line --><template id="arrow">&nbsp; <div /></template>