文字换行后，Flexbox不再对齐项目 [英] Flexbox not aligning item anymore when text is wrapped

问题描述

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

I'm struggeling with using a flexbox containter together with bootstrap 4 to align my elements horizontally centered.

这是我到目前为止所拥有的:

This is what I have so far:

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

如果锚点的文本没有自动换行，则可以正常工作.但是，如果这样做，则链接文本不再居中.而是左转.

This works fine if the anchor's text is not wrapping. However, if it does the link-text is not centered anymore. Instead it goes left-alinged.

我已经在容器上尝试了所有可能的组合，并对图像和锚点使用了项包装器.仍然是链接文本包装时的问题.

I already tried every possible combination on the container as well as using item-wrappers for the image and the anchor. Still the issue when link-text is wrapped.

推荐答案

您还需要添加text-center，所以a中的文本将居中.

You need to add text-center as well, so the text in a will center.

原因是，当文本变得太宽时，a元素也将居中，而align-items-center则将元素居中，而不是其内容居中.

The reason is, when the text gets too wide, so does the a element, and the align-items-center center the element, not its content.

因此，发生的情况是a会增长直到达到其父级的宽度，然后文本将自动换行，并保持左对齐，因为这是文本/内容的默认设置.

So what happens is that the a grows until it reach its parent's width, and then the text will wrap, left aligned, as that is the default for text/content.

text-center可以添加到div的类列表中(因为它是由a继承的)，也可以添加到a自身上(在第二个示例中完成).

The text-center can be either added to the div's class list (as it is inherited by the a), or on the a itself (done in the 2nd sample).

在下面的两个示例中，我添加了一个边框，以便您可以看到不同之处.

堆栈片段

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>

这篇关于文字换行后，Flexbox不再对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！