Center alignment of all the flex items on the display

In order to achieve my desired effect, I have red elements that must be displayed as flex and cannot be changed. I want to place text above the middle of these red elements.

The expected result is shown in this image: https://i.sstatic.net/w3cQS.png

Currently, when I try to use a separate div with display:flex to add legends above the elements, the legends are not centered between the elements as intended. The current result can be seen here: https://i.sstatic.net/8ANlV.png

.legendContainer,
.elementsContainer {
  display: flex;
}

.legendElement,
.element {
  flex: 1;
  height: 20px;
}

.element {
  margin-left: 1px;
  margin-right: 1px;
  background: red;
}
<div class="legendContainer">
  <div class="legendElement"></div>
  <div>..oddXXbboo..</div>
  <div class="legendElement"></div>
  <div>..oddXXbboo..</div>
  <div class="legendElement"></div>
  <div>..oddXXbboo..</div>
  <div class="legendElement"></div>
  <div>..oddXXbboo..</div>
  <div class="legendElement"></div>
</div>
<div class="elementsContainer">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

What changes should I make to achieve the desired outcome?

htmlcssflexbox

Answer №1

To enhance the layout, I suggest placing the legend elements within the flex items and applying position: absolute to them (with position: relative on their parent elements for reference). You can then position them using the following settings for a centered alignment above the right side of their respective parents:

.elementsContainer {
  display: flex;
  margin-top: 50px;
}

.element {
  flex: 1;
  height: 20px;
  margin-left: 1px;
  margin-right: 1px;
  background: red;
  position: relative;
}

.legend {
  position: absolute;
  top: -1.2em;
  right: 0;
  transform: translateX(50%);
}
<div class="elementsContainer">
  <div class="element">
    <div class="legend">..oddXXbboo..</div>
  </div>
  <div class="element">
    <div class="legend">..oddXXbboo..</div>
  </div>
  <div class="element">
    <div class="legend">..oddXXbboo..</div>
  </div>
  <div class="element">
    <div class="legend">..oddXXbboo..</div>
  </div>
  <div class="element"></div>
</div>

Additionally, for more precise positioning, adjust the value of right in .legend to -1px to account for the 1px margins on both sides of the .elements. This will create a 1px separation from the parent's right border.

Answer №2

It's advised to eliminate the unnecessary 

<div class="legendElement"></div>
elements.

Ensure to add a 10% horizontal padding to the legendContainer element for better alignment of your four elements with the five elements below.

Finally, set flex: 1; text-align: center on the child divs.

.legendContainer,
.elementsContainer {
  display: flex;
}

.legendElement,
.element {
  flex: 1;
  height: 20px;
}

.element {
  margin-left: 1px;
  margin-right: 1px;
  background: red;
}

.legendContainer {
  padding: 0 10%;
}

.legendContainer > div {
  text-align: center;
  flex: 1;
}
<div class="legendContainer">
  <div>..oddXXbboo..</div>
  <div>..oddXXbboo..</div>
  <div>..oddXXbboo..</div>
  <div>..oddXXbboo..</div>
</div>
<div class="elementsContainer">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer №3

Consider your div elements as the centerpiece in a sea of red, with white labels floating elegantly above them. To achieve this effect, set your labels to have a fixed width and position them neatly centered at the top of each element:

.elements {
  display: flex;
  background: #f00;
  width: 100%;
  height: 20px;
  justify-content: space-around;
  margin-top: 30px;
}

.element {
  background: #fff;
  width: 5px;
  position:relative;
}

.label {
  position: absolute;
  width: 40px;
  top: -20px;
  white-space: pre;
  left: -20px;
}


   
<div class='elements'>
  <div class='element'>
    <div class='label'>Label 1</div>
  </div>
  <div class='element'>
    <div class='label'>Label 2</div>
  </div>
  <div class='element'>
    <div class='label'>Label 3</div>
  </div>
  <div class='element'>
    <div class='label'>Label 4</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

Creating One Comprehensive Object by Merging Multiple Character Objects

I am attempting to extract text from a news article using the code snippet below: library(rvest) url <- "https://www.bbc.com/future/article/20220823-how-auckland-worlds-most-spongy-city-tackles-floods" final = url %>% read_html() %>% ...

htmlrtext

Strategies for avoiding unused style tags in React components

Expanding beyond React, I'm unsure if React itself is the culprit of this issue. In a React environment with TypeScript, I utilize CSS imports in component files to have specific stylesheets for each component. I assumed these styles would only be ad ...

javascriptcssreactjstypescript

The div content is aligning at the baseline rather than the middle

The social icons on my website are currently displaying at 40x40, with the text appearing below them. I am looking to center the text within the icons themselves. Any tips on how I can achieve this? Your help is much appreciated! Check out the fiddle here ...

css

Organizing table data by columns in a continuous loop

I'm currently working on extracting data from a database, organizing it into tables (potentially multiple tables), and presenting them in columns of 4 across several pages. My main concern is figuring out how to display the tables horizontally like t ...

phpcsswhile-loop

What is the best way to center text vertically in a circular div?

Struggling to achieve a circle-shaped div with centered text? While it's easy to horizontally align text in the middle, achieving vertical centering can be a challenge. Various methods such as vertical-align, padding, and display have been attempted, ...

htmlcss

Unable to receive any response with AJAX requests

Welcome to my HTML page <html> <head> <title>Using AJAX</title> </head> <script type="text/javascript" src="ajax.js"></script> <body> <form action="searchItems.php" name="searchItem" method="p ...

javascriptphphtmlajax

Conceal rows in a table that are not selected using Jquery when the table has been loaded from a given URL

Below is the HTML code for an user search input field and the results table: <div class="input-group"> <input type="text" id="q" class="form-control" placeholder="Search for User"> <span class="input-group-btn"> ...

javascriptjqueryhtmldjango

Modifying text appearance and design in material-ui release 0.15.4

I'm quite new to CSS and front-end web development, and I'm struggling with setting the style of a button on my page. I want to change the text color and possibly adjust the primary color of my theme from cyan to blue. I know that material-ui has ...

cssmaterial-ui

Tips for customizing the md-select icon

I work with the angular-material framework and specifically utilize its <md-select/> component. I am interested in styling its icon: https://i.stack.imgur.com/g4pu1.png In the past, we would modify its css by targeting the class .md-select-icon, ...

cssangularjsmaterial-designangular-material

My component reference seems to have gone missing in angular2

Trying to load my Angular 2 app, I encountered this error: https://i.stack.imgur.com/FmgZE.png Despite having all the necessary files in place. https://i.stack.imgur.com/kj9cP.png Any suggestions on how to resolve this issue? Here is a snippet from ap ...

javascripthtmlintellij-ideaangular

How to style a triangle-shaped border with CSS transparency

I'm on a quest to create a border with a dynamic triangle effect. So far, I've managed to achieve a basic gradient effect, resulting in the following design: Check out my current design in action However, the background features a gradient that ...

htmlimagecssborder

Adaptable bootstrap placement

I have created a form that includes a custom checkbox element. The issue is that the label for the checkbox is not vertically aligned with the checkbox itself. How can I adjust the label to be vertically centered with the checkbox? You can see the code ...

htmlcssbootstrap-4

Utilizing AJAX and JavaScript to generate a table using the AJAX response and placing it within a <div> element

I am currently passing the response of this action in text form, but I would like to display it in a table format. Is there a way to do this? function loadAditivos(){ $('#aditivoAbertoInformacoesTexto').html('<div id="loaderMaior ...

javascripthtmljsonajax

What steps do I take to eliminate this additional content?

Currently working on a web messenger project and facing an issue with a specific bar that I want to remove from my interface: https://i.sstatic.net/sp05i.png Within the Home.blade.php file, the code snippet looks like this: @extends('layouts.texter& ...

htmlcsslaravelvue.js

Step-by-step tutorial for making a mesmerizing fade out grunge background

How can I achieve a fading grid background effect? I have experimented with using a conic-gradient for the background, but I am unsure how to make it fade out. background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px; ...

htmlcsstwitter-bootstrap

Next.js horizontal scrollbar appearing unexpectedly

As I work on my Next.js project, I've noticed an issue with unwanted horizontal scrollbars appearing on every subpage. These scrollbars allow scrolling about 30px horizontally, but only appear when the content extends beyond the viewport. I attempted ...

htmlcssnext.jshorizontal-scrolling

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

Implementing a video background within a dynamic two-column layout, accompanied by text within a separate column

While viewing on a large screen with Bootstrap 5, everything looks good: https://i.sstatic.net/Vm6bH.png However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly. https://i.sstatic.n ...

cssbootstrap-5

Send information without refreshing the page

Even though there are countless questions similar to this one, I am still struggling to make this work correctly. Any advice on what steps I should take to fix this would be greatly appreciated, as my understanding of jQuery is about 80%. <form action= ...

phpjqueryhtmlforms

struggling to preserve form data using PHP and MySQL

I am facing an issue with a page that needs to display a form with checkboxes, save the results in the database, and then load the page with the checkboxes checked based on the stored data. Although I realize that my solution of floating "checked" is not ...

phpmysqlhtmlajaxforms