What is the best way to align the middle item of a flexbox using CSS?

I am attempting to present text divided into 3 divs - the middle div contains the highlighted portion of the text, while the first and last divs contain the text before and after the highlighted section.

Both the first and last flex items have classes that truncate the text, providing only essential context for the user.

I aim for the highlighted portion to always be horizontally centered within the middle of the flexbox, regardless of the amount of text (or lack thereof) in any of the flex items.

Here is my current setup:

* {
    font-family: Arial;
}

div > div:first-child {
    direction: rtl;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289958994">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed convallis magna eu sem. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec quis nibh at felis congue commodo. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary"></div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success"></div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Lorem ipsum dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

Is it feasible to consistently center the middle item?

cssflexboxoverflowbootstrap-5

Answer №1

Successfully achieved my desired outcome by utilizing flex: 1.

* {
    font-family: Arial;
}

div > div:first-child {
    direction: rtl;
}

div > div:first-child, div > div:last-child {
    flex: 1 !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aeccedecdfdadcdcceebcbbe7dcdbd7dbece8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed convallis magna eu sem. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec quis nibh at felis congue commodo. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary"></div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success"></div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Lorem ipsum dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

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

Adding CSS styles to a pre-existing table structured like a tree

Can a CSS style be applied to a pre-existing HTML table structured as a tree? For instance, in Firefox, the Bookmarks Library table is set up as a tree. Is it feasible to add a CSS style to one specific column without affecting the others? While using tr ...

htmlcssfirefox

What is the best way to stylize a date using Bootstrap-datepicker?

While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...

javascripthtmlcssbootstrap-datepicker

Adjusting the dimensions of the image carousel

Here is my code for an Image carousel: <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div id="imageCarousel" class="carousel slide" data-interval="4000" data ...

jquerycssrazorbootstrap-4

Guide to building a nested dropdown navigation in Angular 12 with the power of Bootstrap 5

I am looking to implement a multilevel dropdown feature in my Angular 12 project with Bootstrap 5. Can someone please guide me on how to achieve this? For reference, you can view an example here. Thank you in advance! ...

angularbootstrap-5

Why does box-shadow only display on the bottom border and not the right and bottom border?

I want to add a shadow effect on the bottom and right sides of a specific div. #navigation-and-slideshow { overflow: hidden; background-color: #fff; padding: 10px 1%; box-shadow: 2px 2px 5px #222; } However, I am only seeing the shadow ef ...

css

What is the reason for the absence of styles in index.html when accessing the local server?

When using node.js to open the server, I encountered an issue where the styles are not displaying. Strangely, when opening index.html directly in the browser, all the styles show up correctly. What could be causing this discrepancy? index.html <!doctyp ...

javascriptcssnode.js

Incorporate a Burger Icon into the Navigation Menu

insert image description here I am currently working on implementing a hamburger slide-out feature in my navigation bar. The desired behavior is for the sidebar to slide out to the right. We are using Elementor within WordPress for this project. Has anyone ...

csswordpressdrop-down-menunavigationelementor

How can I navigate to an anchor using hover?

I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...

htmlcss

The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Chrome rendering and code issue I'm struggling to understand why the nested table (highlighted in red) is not taking up the full height of the outer table cell (highlighted in green) which spans 8 rows. This used to work fine, but newer browsers are ...

htmlcss

Make sure the div is always positioned above everything, including any built-in pop-up windows

When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...

javascriptjqueryhtmlcss

Different methods for adjusting the bot's background hue

Currently, I have my Luis bot integrated into a SharePoint website using the iframe HTML element. I am looking to add some custom styling to it, specifically changing its background color. I found a tutorial that explains I need to clone the source code a ...

css.netazurebotframework

What is causing the gap to appear between the image and the div element underneath?

I recently encountered an issue where I set up an image to scale to full width, but it was always cut off at the bottom when it extended too high. Here is my current setup: div, img, body { margin: 0; padding: 0; } #image { width: 100%; he ...

htmlcssimage

Is there a way to align a column with text and input to the right?

Currently, I am in the process of upgrading a project from Bootstrap 3 to Bootstrap 5. One challenge I am facing is aligning text and input within columns to the right side. Unfortunately, I haven't been able to figure out the correct approach in Boot ...

twitter-bootstraptwitter-bootstrap-3bootstrap-5

Discovering the initial word of a string using jQuery

I'm currently facing an issue with jQuery that I need help solving. Here's the scenario: I am creating tooltips and positioning them directly under a specific trigger using CSS. Everything is functioning correctly, but there is one problem: In ...

javascriptjqueryhtmlcsstooltip

`place the table inside a hidden div`

I am trying to create a non-editable table that can be overlayed with a div under specific conditions. However, it seems like my current implementation is not working as expected. What could be causing this issue? CSS <style type="text/css"> # ...

htmlcss

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

cssreactjsmaterial-ui

Styling <html:link> elements with CSS

I'm new to using struts and I'm struggling with applying my CSS styles to link tags. <html:link action="LoginLink" styleClass="loginButton"/> My goal is to add a button image to a link that directs to a login page. I've successfully ...

cssbuttonstrutsstruts-html

Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "au ...

htmlcssmodal-dialog

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

In relation to this query: I have successfully integrated the if/else statement into the dropdown without any issues. However, upon using the dropdown on the website, I noticed that the item generated by the if/else statement – in this case, "log in" or ...

phphtmlcssbootstrap-4

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

javascripthtmlcss