twitter-bootstrap - 文本被换行时 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>

如果 anchor 的文本没有换行，这会很好地工作。但是，如果确实如此，链接文本将不再居中。相反，它向左倾斜。

我已经在容器上尝试了所有可能的组合，并为图像和 anchor 使用了元素包装器。链接文本被包装时仍然是问题。

Answer 1

您还需要添加 text-center，这样 a 中的文本将居中。

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

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

text-center 可以添加到 div 的类列表中(因为它被 a 继承)，或者在 a 本身上(在第二个示例中完成)。

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

堆栈片段

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>