javascript - 是否可以使用子元素作为中心来居中元素

Question

我在这样的元素中有一个元素:

<p>some text <i class="fas fa-arrows-alt-h"></i> some more text</p>

是否可以将 <p> 居中？元素与 <i>元素为中心？

编辑:

两边的文字长度不一样

为了澄清，这就是我想要实现的目标(Photoshopped)

Answer 1

像这样？

添加类 centered标记 <i>

抱歉拼写错误，我没有任何工作可做。

运行代码片段

p {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div>
  <p>some text <i class="centered fas fa-arrows-alt-h"></i> some more text</p>
  <p> text <i class="centered fas fa-arrows-alt-h"></i> more text</p>
  <p> bardun <i class="centered fas fa-arrows-alt-h"></i> guyline</p>
  <p> ball <i class="centered fas fa-arrows-alt-h"></i> campfire</p>
  <p> knob <i class="centered fas fa-arrows-alt-h"></i> knot</p>
  <p> leder <i class="centered fas fa-arrows-alt-h"></i> scot Leader</p>
  <p> lejsss <i class="centered fas fa-arrows-alt-h"></i> campsite</p>
</div>