当文本被换行时，Flexbox 不再对齐项目答案

【问题标题】：Flexbox not aligning item anymore when text is wrapped当文本被换行时，Flexbox 不再对齐项目
【发布时间】：2018-07-15 09:10:08
【问题描述】：

我正在努力使用flexbox 容器和bootstrap 4 将我的元素水平居中对齐。

这是我目前所拥有的：

<div class="d-flex flex-column align-items-center">
    <img class="rounded-circle" height="50">
    <a href="https://some.external.link" target="_blank">
        Follow me
        <i class="fa fa-external-link "/>
    </a>
</div>

如果锚的文本没有换行，这可以正常工作。但是，如果这样做，则链接文本不再居中。相反，它会左转。

我已经在容器上尝试了所有可能的组合，并为图像和锚点使用了 item-wrappers。包装链接文本时仍然存在问题。

【问题讨论】：

你能告诉我们你的css代码吗？

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

您还需要添加text-center，以便a 中的文本居中。

原因是，当文本变宽时，a 元素也会变宽，align-items-center 会使元素居中，而不是其内容。

所以发生的情况是a 会增长直到达到其父级的宽度，然后文本将换行，左对齐，因为这是文本/内容的默认设置。

text-center 可以添加到div 的类列表中（因为它由a 继承），也可以添加到a 本身（在第二个示例中完成）。

在下面的两个示例中，我添加了一个边框，以便您可以看到差异。

堆栈sn-p

a {
  border: 1px dashed red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column align-items-center text-center">
    <img class="rounded-circle" height="50">
    <a href="https://some.external.link" target="_blank">
        Follow me
        <i class="fa fa-external-link "/>
    </a>
</div>

<div class="d-flex flex-column align-items-center">
    <img class="rounded-circle" height="50">
    <a href="https://some.external.link" target="_blank" class="text-center">
        Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me         <i class="fa fa-external-link "/>
    </a>
</div>

【讨论】：

这是有效的。谢谢。但我不明白为什么非包装内容居中但不包装
@KingKerosin 检查更新...现在更好地解释
感谢您的解释。现在有意义

【解决方案2】：

Flexbox 样式仅影响 flex 父级的直接子级，在您的情况下是 img 和 a，但是一旦您将文本包装在 a 内，flex 就不能再影响这个包装器元素了，因为它不是 flex 容器的直接子级。所以如果你想换行链接文本，直接在a元素中添加一个文本居中的类。

【讨论】：