I have a flex-box (see below snippet for examples).
I want to set it so that in all cases, the <h2>
is in the center of the flex-box and the other spans will flow around that, based on their markup.
I am basically looking for an align-self
CSS code but for the main axis, not the cross axis (this might help explain what I am asking).
I am also applying margin: auto;
to my <h2>
, which I learned about after reading this (fantastic page but, still leaves me with my following question - unless I didn't fully understand all of it).
Here's the code I got:
.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
h2 {
margin: auto;
]
<div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div>
To fully reiterate my question: I want to know how to center the
<h2>
on my page so that where ever the other<span>
s are, the<h2>
will always be in the dead center of the flex-box.
Thank you.
P.S. I am willing to use JS and jQuery but would prefer a pure CSS way of achieving this.
UPDATE
This is and update after an answer by @Michael_B
His answer got me thinking. While I have not found a way to do this, I believe the following is a step in the right direction:
HTML
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
CSS
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}
.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}
<div class="container">
<div>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
</div>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 3</span>
</div>
</div>
basically, the theory is that while the amount of total <span>
s are unknown, what is known is that there will be a total of three elements: <div><h2><div>
As you can see in my above snippet, I have tried (
flex: 0 0 auto
andflex: 1 1 auto
, etc.) to get it to work but have not been successful. Can anyone give me some insight as to if this is a step in the right direction and maybe how to push it through to an actual product?
Thank you again.
To center the inner div element we will make the parent a flex container. By adding the display: flex; property we make the section element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the justify-content: center; .
Make each item a (nested) flex container and add justify-content: center . Now each span element is a centered flex item. Use flex auto margins to shift the outer span s left and right.
Flexbox is not designed for z-axis alignment (overlapping). Any overlapping would have to come from negative margins, absolute positioning, CSS Grid Layout, JavaScript or something else. The z-index property may also need to play a role. Cards are made to overlap using line-based placement.
Flex alignment properties work by distributing free space in the container.
Hence, there's no single-step method to center one flex item when it shares space with other items, unless the total length of the siblings is equal on both sides.
In your second example, the total length of the spans is equal on either side of the h2
. As a result, the h2
is perfectly centered in the container.
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p>
Just keep in mind that centering the h2
with justify-content: center
(or space-around
or space-between
), only works because there is equal balance on both sides. Each pixel of difference between sides will throw off the h2
by a commensurate amount.
In your first and last examples there is a clear imbalance between sides. Standard alignment properties such as justify-content
and margin
will not work because they center within the available space, not the total space.
You could insert duplicate spans on opposite sides with visibility: hidden
to achieve equal balance. But this bloats your mark-up with semantically worthless elements.
Instead, if you have the ability to calculate the width of each span, you can insert pseudo-elements to achieve equal balance.
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
span {
flex: 0 0 75px;
border: 1px dashed black;
box-sizing: border-box;
}
div.container:first-child::before {
content: "";
width: 225px;
}
.container:nth-child(2)::after {
content: "";
width: 75px;
}
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; border: none; }
<div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div>
<p><span>TRUE CENTER</span></p>
Ultimately, as a last resort with CSS, you can center the h2
with absolute positioning. This will remove the element from the document flow, but keep it perfectly centered in the container at all times.
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
position: relative; /* NEW */
height: 50px;
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
.container:nth-child(1) { justify-content: flex-end; }
.container:nth-child(2) > span:nth-of-type(4) { margin-left: auto; }
.container:nth-child(3) > span:nth-of-type(2) { margin-right: auto; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div>
<p><span>TRUE CENTER</span></p>
UPDATE (based on revised question)
Basically, the theory is that while the amount of total
<span>
s are unknown, what is known is that there will be a total of three elements:<div><h2><div>
.
So, if we know there will always be three elements, there is a potential solution using flex properties.
.container {
display: flex;
}
.container > * {
flex: 1; /* KEY RULE */
}
h2 {
text-align: center;
margin: 0;
}
.container > div {
display: flex;
justify-content: space-around;
}
/* non-essential decorative styles */
.container { background-color: lightgreen; border: 1px solid #ccc; padding: 5px; }
.container > * { border: 1px dashed red; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
<p><span>TRUE CENTER</span></p>
Here's what's happening:
flex: 1
, which causes them to distribute container space equally among themselves. The end result is three items of equal width.h2
text in the h2
element will also center the text in the container.More information and solutions:
One way would be to add empty spans on both sides, then set the spans and the h2 to a certain flex value, like so:
.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
h2 {
margin: auto;
text-align: center;
flex: 3 0;
}
span{
flex: 1 0;
}
<div class="container">
<span></span>
<span></span>
<span></span>
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span></span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
<span></span>
<span></span>
</div>
So you guarantee that the space on the sides are equal. The only issue then is that you have to determine how much width you want the h2 to take.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With