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

问题描述

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

这是我目前所拥有的:

<a href="https://some.external.link" target="_blank">跟着我<i class="fa fa-external-link"/></a>

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

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

解决方案

你还需要添加text-center，这样a中的文字就会居中.

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

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

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

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

堆栈片段

a {边框:1px 红色虚线；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div class="d-flex flex-column align-items-center text-center"><a href="https://some.external.link" target="_blank">跟着我<i class="fa fa-external-link"/></a>

<div class="d-flex flex-column align-items-center"><a href="https://some.external.link" target="_blank" class="text-center">关注我关注我关注我关注我关注我关注我关注我关注我关注我关注我</a>

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.

解决方案

You need to add text-center as well, so the text in a will 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.

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.

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

In below two samples I added a border so you can see the difference.

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>

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