Center a specific item by aligning it with flex

I'm struggling to achieve a simple layout using flexbox, and I can't figure out how to do it.

My objective is to have 3 divs aligned in a row, with the middle div (containing "short") centered. A visual representation would make it clearer:

The divs are currently centered but not in the way I want. I want the "short div" to be centered with the other divs around it. Is there a CSS rule that I overlooked for this?

Here's my current code and Jsfiddle link:

<div class="box">
   <div class="A">whatever</div>
   <div class="B">short</div>
   <div class="C"> a long piece of content here </div>
</div>

CSS

.box{
display:flex;
flex-flox:row nowrap;
justify-content:center;
align-content:center;
align-items:center;
background-color:red;
}

.A{
border:medium solid black;
}
.B{
border:medium solid black;
}
.C{
border:medium solid black;
}

Jsfiddle Link

Thank you

Answer №1

Centering using pure flexbox is not possible...the way centering works doesn't support it. You will need to use positioning, which somewhat defeats the purpose of using flexbox

However, if you are able to adjust the structure, flexbox can be helpful

* {
  box-sizing: border-box;
}
.box {
  display: flex;
}
.wrapped {
  flex: 1;
  border: 1px solid grey;
}
.A {
  text-align: right;
}
<div class="box">
  <div class="wrapped">
    <div class="A">whatever</div>
  </div>
  <div class="B">short</div>
  <div class="wrapped">
    <div class="C">a very very very very very long content</div>
  </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

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

Despite having the correct image URLs, the images are failing to display in the custom section of Shopify

Currently, I'm in the process of developing a unique Shopify section that showcases text alongside images. To enable users to upload images via the theme customizer, I have implemented the image_picker settings within the schema. The issue I am facing ...

Elegant Border Separator

I'm attempting to achieve the design below (with a 1 pixel gap on each end): ...

Unable to apply height and width properties to CSS div

I've been facing an issue with applying height and width to div elements in my project. The tech stack I'm using includes TailwindCSS and Nextjs. My objective is to create vertically snap-scrolling slides, but the height and width properties see ...

The WP archive.php template is malfunctioning

Having an issue with my website Whenever I try to view the monthly archive () the design appears flipped upside down. I initially assumed that if the archive.php file was missing, WordPress would default to using index.php for the archive page. So why is ...

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

What is causing nth-of-type to behave like nth-child?

My goal is to alternate colors for elements with a certain class, ignoring any elements of different classes in between them. Despite my attempts to use nth-of-type, I have encountered issues with its functionality in Firefox and Chrome. http://jsfiddle.n ...

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

A layout featuring two columns that have heights which are fixed to the bottom of the footer

I've designed a simple layout featuring 2 columns and a footer that adjusts based on the height of the longer column. <div id="holder"> <nav class="navbar navbar-default navbar-fixed-top"></nav> <div class="container"> ...

Tips for personalizing tooltips in Bootstrap 4

Currently, I am utilizing Bootstrap '4.0.0-alpha.6' and attempting to customize the tooltip styles. Despite adding a custom CSS class along with using Bootstrap 4, the tooltip is not responding correctly to my specified style when hovering over. ...

Display a fresh <p> tag when the condition in the if-statement is met

If you are looking for a questionnaire, check out this one. Now, I am interested in creating if-statements using HTML/CSS/jQuery to achieve the following scenario: Initially, only Question 1 will be visible. When the input matches a certain value like X, ...

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

What could be hindering the animation of this button?

I found this snippet on a coding blog, where the design looked perfect: However, when I tried implementing it, the button displayed a static gradient instead of animated. Additionally, aligning the text in the center vertically seems to be trickier than e ...

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

The date-picker element cannot be selected by html2canvas

I'm encountering an issue with Html2canvas while trying to capture a screenshot of my page. Specifically, the date shown in the date-picker on the page is not appearing in the screenshot. Do you have any insights into why this might be happening and h ...

To close the menu, simply tap on anywhere on the screen

Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element? $(function() { $('.drop-down-input').click(function() { $('.drop-down-input.selected').rem ...

Illuminated container with shading

I'm struggling to style a box with a unique glow effect and shadow at the bottom. I've hit a roadblock in creating this particular effect. The glow effect I am aiming for is shown here: https://i.stack.imgur.com/i2va8.png My attempts to create ...

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Apologies for the basic inquiry, but I have created a sudoku grid with the following structure. Modified(Using Tables): <table id="grid" border="1" style="border-collapse: collapse;"> <tr class="row"> ...