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

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>

Answer 2

如果您可以在另一个容器中添加文本，则可以尝试以下解决方案：

p {
  display: flex;
}
p > span {
  width:100%;
}

p > span:first-child {
 text-align:right;
}

.centered {
  margin:0 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

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