5

I have a flex-box (see the 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 (a fantastic page, but it 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.

P.S.: I am willing to use JavaScript and jQuery, but I would prefer a pure CSS way of achieving this.

After an answer by Michael Benjamin:

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, it is known 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 autoand flex: 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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
4lackof
  • 1,250
  • 14
  • 33

2 Answers2

5

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:

  • The three elements are flex items, as their parent is a flex container
  • Each item is given a flex: 1, which causes them to distribute container space equally among themselves. The end result is three items of equal width.
  • Now, centering the h2 text in the h2 element will also center the text in the container.
  • Each div can be made a nested flex container, and the spans can be aligned with flex properties.

More information and solutions:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    wow! an astute answer indeed. I've updated my answer after this, maybe you have further insight into this? Thank you. – 4lackof Aug 19 '16 at 03:16
  • you are a god of flex-boxes my friend. This is really helpful. I have one last question, if you are up for it of course (I only just thought of it while testing your last update). Maybe it is too much, but maybe you can help. You have been beyond generous already. – 4lackof Aug 19 '16 at 05:52
  • 1
    As Stack Overflow Q & A is meant to serve as a high-quality reference for the broader developer community, adding too many updates and deviations from the original question makes this post less useful and somewhat convoluted. I would suggest you focus this question on one particular issue. For your question about centering with the `order` property, consider posting a new question. – Michael Benjamin Aug 19 '16 at 15:47
  • yes, you are right. Thank you. I've made it a new question (http://stackoverflow.com/questions/39043729/css-order-flex-item-to-always-be-in-the-middle-of-other-divs) and removed it from this question – 4lackof Aug 19 '16 at 16:24
2

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.

Jake
  • 4,014
  • 8
  • 36
  • 54
  • wow! great idea. this is good but requires there always be six spans (three on each side) If I distribute this html to one of my co-workers and he forgets to put the extra spans, it will err. Do you know of anyway around this? Is this something which might need to have JS code which verifies there are six/even numbers (say if more than 6 spans are put on each side)? Again, thanks for your answer – 4lackof Aug 18 '16 at 23:47