Flexbox failing to properly align items once text wraps in container

Having difficulty using a flexbox container with bootstrap 4 to center align my elements horizontally.

This is the code snippet I have been working on:

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

The above code works well unless the anchor's text wraps around. In that case, the link-text loses its centered alignment and appears left-aligned instead.

Despite trying multiple different configurations on the container and experimenting with item-wrappers for the image and anchor, the issue still persists when the link-text is wrapped.

https://i.sstatic.net/ZSrp9.png

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

To center the text in a, you also need to include text-center.

The issue arises when the text becomes too wide, causing the a element to expand as well. The align-items-center property centers the element itself, not its content.

As a result, the a continues to grow until it reaches the width of its parent, at which point the text wraps and aligns to the left by default.

You can add the text-center class either to the div containing the a (since the style is inherited), or directly on the a element as demonstrated in the second example below.

I've included a border in the following examples for visual clarity.

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

When using Flexbox styles, it's important to remember that they only affect the direct children of the flex parent. In your case, this includes the img and a elements. However, once you wrap text inside the a element, the flex properties no longer apply because the wrapper-element is no longer a direct child of the flex container. To center link text within the a element, consider adding a class specifically for centering text directly to that element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...

cssreactjsmaterial-uireact-tablereact-table-v7

Importing global variables in Angular SCSS files

Considering a transition to SCSS within my Angular project, I am primarily interested in utilizing the variables feature. Currently, I have been relying on CSS variables, which are conveniently declared in :root in my styles.css file and can be accessed in ...

cssangularsass

Achieving maximum height in Tabs with react-bootstrap

Utilizing React Bootstrap, I have a full screen Modal with Tabs in its body. Within one of these Tabs, I aim to create a Lexical Editor that fills 100% of the width and height of the modal body with some margin. This is a simplified version of my code: F ...

cssreactjstabsheightbootstrap-5

Can the background image of a div be cropped using CSS/JavaScript techniques?

I have a div with a background image of a world map that I need to clip at two precise points. Clipping from the left side is straightforward. In my CSS: .le-map { background-image: url('../img/le-map-of-le-world.mlg'); background-size: 100% ...

javascriptcssimage

Creating a personalized avatar display with Bootstrap 5

I'm trying to create a display that resembles a rounded avatar with text next to it. While I've successfully made the rounded avatar, an issue arises when I place text beside it where the avatar sometimes appears oval instead of round. What could ...

htmlcssbootstrap-5avatar

Incorporating hyperlinks into icons

This is my first time creating a website for myself and I have added social media icons to share my social media pages. However, I am unsure of how to add links to these icons. Any assistance would be greatly appreciated. Here is the HTML code: <i ...

htmlcss

Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. https://i.sstatic.net/NdAUB ...

htmlcss

Having trouble getting HTML to render properly in React JS on localhost using Apache server

For the past week, I've been working on resolving an issue. I started by creating a React Application using: npm create react-app After that, I attempted to build it with: npm run build Everything seemed to go smoothly. I generated a build folder ...

javascripthtmlcssreactjsapache

Footer remains attached to the bottom of the page while the content extends too far down

Having some trouble with my sticky footer - despite checking out various resources and examples, I can't seem to achieve the desired outcome. Update: I don't want the footer to be fixed. I want it to stay at the bottom of the screen if there isn ...

htmlcsswordpress

Tips for formatting list items to display quotes in a scrolling ticker

How to format the <li> element HTML: <div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;"> <ul id="patTestUL"> <li> <div style="padding: 0; margin: 0; width: 98%;" ...

htmlcss

Unusual spacing between lines on Chrome

I seem to be facing an issue related to line height and block height ratios. My font-size is set at 15px, line height at 1.5em (22.5px), and div height at: 16 lines * 1.5em = 24 em. Everything appears fine in Firefox and MS Edge - the div contains exactly ...

cssgoogle-chrome

Bootstrap 5.3 does not allow custom background colors to take precedence

Ever since the update to Bootstrap 5.3.1, I've been facing an issue where two custom background colors are not overriding the colors set by Bootstrap, even when using !important. Strangely enough, they were working fine before the update. Here are my ...

cssbootstrap-5

How can I show the configuration in Laravel?

After updating my pages to utilize an extended header for consistent content across all pages, I encountered an issue with the footer configuration. Whenever I attempt to retrieve a configuration from Laravel, it appears as normal text instead of being pro ...

phphtmlcsslaravel

Tips for aligning the first element in an inline-block list item horizontally

I'm working on a list with horizontal scroll functionality to allow users to view content by scrolling. I have successfully implemented this, but I'm facing a couple of challenges that I need help with: I want the first item in the list to alwa ...

javascriptjqueryhtmlcssbootstrap-4

Deliver CSS and JS files from directories outside of the public folder in Laravel 5

Although it may seem to deviate from Laravel's structured approach, I have a method to my madness. My plan is to use a single installation of Laravel to host multiple database-driven websites. Currently, all these sites share the same layout, with a s ...

phpcsslaravellaravel-5

Why does the Hamburger Menu shift my website's logo when it opens?

I'm in the process of implementing a hamburger menu on my website. My attempts have involved adjusting the positioning of both the #logo and .topnav elements. Code Snippet source function myFunction() { var x = document.getElementById("myTopn ...

javascripthtmlcss

Bootstrap vertical carousel compatibility with Chrome and Internet Explorer

Encountering an issue with the bootstrap vertical carousel in Chrome and IE, but not in Firefox. Everything seems to work fine in Firefox! The problem arises when clicking on the "next" slide - the contents change differently than expected, especially com ...

.nettwitter-bootstrapgoogle-chromeumbracocarousel

Ensuring the HTML remains at its original scale while scaling a div using CSS

My code consists of HTML and CSS that look like this: <div class="box" style="transform: scale(2);"> <div class="text">This is my text.</div> </div> I'm trying to figure out how to prevent the text inside the box from sca ...

jqueryhtmlcssjquery-ui

I am looking to have three rows of input text area comments instead of just one

Utilizing Bootstrap 4.3.1 with React Components I currently have this image: https://i.sstatic.net/rudsE.png And I am aiming for this design: https://i.sstatic.net/VmyTW.png comments: { elementLabel: "Comments", elementType: 'textar ...

javascriptcssreactjssassbootstrap-4

Is it important to maintain the scroll to top button at a consistent height?

I am facing an issue with my button. I want the button to remain at a consistent height even when the window size is adjusted vertically. How can I ensure that the button does not move or get pushed down as the height changes? http://jsfiddle.net/ccq9cs9L ...

javascriptjqueryhtmlcssscroll