CODEWITHSUNDEEP
twitter-bootstrapcssflexboxbootstrap-4
KingKerosin
KingKerosin

Reputation: 3841

Flexbox not aligning item anymore when text is wrapped

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.

Screenshot

Upvotes: 0

Views: 452

Answers (2)

Asons
Asons

Reputation: 87191

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>

Upvotes: 4

user5718206
user5718206

Reputation:

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.

Upvotes: 0

Related Questions