如果左侧已经有一个项目，则将容器中的弹性框项目居中[重复]

Question

我有一个 flexbox 行容器，其中左侧的 flex 项带有一个未指定宽度的图标，第二个 flex 项是一个多行文本块。

问题是，我希望这个文本位于 flexbox 容器的精确中心，并且此时它被第一个 flex 项推到左侧。

居中的一种方法是将文本框的右侧填充到与图标相同的宽度，例如使用margin-right。

或者我可以在文本上设置一个:after 元素以在右侧添加另一个弹性框？最好的方法是什么？

例如

<div style="display: flex; width: 10em; align-items: center; border:1px solid blue; text-align:center">
<a style="flex: none; width:auto">&rarr;</a>
<a style="flex:1; /* margin-right: how do I make this the same width as the &rarr; box above*/">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>

Answer 1

你想在父块中居中块，这样一个块就不会被计算在内，所以你需要把它从流中取出，设置它position: absolute。 There你可以阅读更多。

Answer 2

我会这样做：

<div>
  <a class="a">&rarr;</a>
  <a class="b">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>

 div {
  position relative;
  display: flex; 
  justify-content: center;
  align-items: center; 
  max-width: 22em; 
  height: 22em;
  border:1px solid blue; 

  a.a {
    position: absolute;
    left: 0;
    align-self: center;
  }

  a.b {
    display: flex;
    justify-content: center;
    align-self: center;
    flex: 1;
  }
}

https://jsfiddle.net/km5gdrcm/2/

Answer 3

绝对定位图标 a，这会将其从文档流中移除，因此不会影响居中的框。

<div class="container">
<a class="icon">&rarr;</a>
<a class="centered-box">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>

.centered-box {
  flex: 1;
}

.container {
  position: relative;
  display: flex; 
  width: 20em; 
  align-items: center; 
  border:1px solid blue; 
  text-align:center;
}

.icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

小提琴：https://jsfiddle.net/nt4shjn5/

在容器中添加填充以避免图标上的文本溢出：https://jsfiddle.net/nt4shjn5/1/