Question

我有一个flexbox行容器，其宽度未指定的图标作为左flex-item，而多行文本块作为第二个flex项目。

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

将它居中的一种方法是将文本框的右侧填充到与图标相同的宽度，例如，使用保证金权利。

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

E.g。

<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

将图标置于绝对位置，将其从文档流中取出，这样就不会影响居中的框。

<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/

如果左侧已有项目，则将容器中的Flexbox项目居中

3 个答案: