allegutta allegutta - 7 months ago 26
HTML Question

Flexbox: Align between bottom and center?

Does someone know how to create this layout, using flexbox?:

enter image description here

The text is going to be placed in the center, and the button is going to be placed between the text and bottom.

I have this now:

HTML:

<div class="aligner">
<h3>SUPERMAN</h3><p>FTW</p>
<button>BUTTON</button>
</div>


CSS:

.aligner {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
}


This aligns everything in the center, but I want only the text to be in center, and the button between center and the bottom.

Answer

You can try this layout:

  • Anonymous element with flex: 1
  • The title and subtitle (titles)
  • Element with flex: 1 and display: flex.

The elements above and below the title will take available space left by titles in equal amounts. So the titles will become centered.

Those elements can also be flex containers, and you can align their contents inside them as desired.

html, body {height: 100% } * { margin: 0; }
.aligner, .below {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.aligner {
  height: 100%;
}
.aligner::before { content: ''; }
.aligner::before, .below {
  flex: 1;
}
<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <div class="below">
    <button>BUTTON</button>
  </div>
</div>

Comments