文本被包装时，Flexbox不再对齐项目

Question

我正在使用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。链接文本被包装的问题仍然存在。

Answer 1

您还需要添加text-center，因此a中的文字会居中。

原因是，当文字过宽时，a元素也会过宽，align-items-center将元素置于中心，而不是内容。

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

text-center可以添加到div的班级列表中（因为它由a继承），或者添加到a本身（完成于第二个样本。）

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

Stack snippet

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>

Answer 2

Flexbox样式仅影响flex父级的直接子级，在您的情况下img和a，但只要您将文本包装在a中，flex就可以＆ ＃39; t不再影响这个wrapper-element，因为它不是flex容器的直接子代。因此，如果要包装链接文本，请直接在a元素中添加用于居中文本的类。