Flexbox not aligning item anymore when text is wrapped

Question

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

This is what I have so f

Answer 1

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>

Answer 2

Flexbox styles affects only direct children of the flex parent, in your situation it's img and a, but as soon as you wrap text inside a, flex can't affect this wrapper-element any more, cause it's not a direct children of the flex container. So if you want to wrap link text, add a class for centering text to the a element directly.