Trouble Vertically Centering Text onto Cube Face

Question

I'm looking at the following CodePen: https://codepen.io/digisam/pen/bNPXXX. Here is the code.

/* Set-up */

body {
  color: rgb(6, 106, 117);
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 100%;
  background: #F4F6F8;
  padding: 3em 0 0 0;
  line-height: 62px;
  -webkit-perspective: 1000px;
}


/* Container box to set the sides relative to */

.cube {
  width: 30%;
  text-align: center;
  vertical-align: middle;
  margin: 0 auto;
  height: 200px;
  -webkit-transition: -webkit-transform .33s;
  transition: transform .33s;
  /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* <-NB */
}


/* The two faces of the cube */

.flippety,
.flop {
  background: rgb(247, 247, 247);
  border: 1px solid rgba(147, 184, 189, .8);
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
  box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
  height: 200px;
}


/* Position the faces */

.flippety {
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}

.flop {
  -webkit-transform: rotateX(-90deg) translateZ(-100px);
  transform: rotateX(-90deg) translateZ(-100px);
}


/* Rotate the cube */

.cube:hover {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  /* Text bleed at 90º */
}

<div class="cube">
  <div class="flippety">
    <h1>Flippity</h1>
  </div>
  <div class="flop">
    <h2>Flop</h2>
  </div>
</div>

Looking at the text, I can't figure out why I cannot get the text to be vertically centered onto the cube's face.

I've tried using vertical-align: middle;. I've also tried making the text as a span, but nothing has worked.

Use display: flex; align-items: center; justify-content: center; at the cube. Remove vertical-align and text-align, those are probably not needed then. — Sascha Grindau, Jul 22 '19 at 19:13
I can now finally add answers. Would you accept it as correct, then? Thanks. — Sascha Grindau, Jul 22 '19 at 19:19

score 1 · Accepted Answer · answered Jul 22 '19 at 19:18

1

Use display: flex; align-items: center; justify-content: center; at the cube. Remove vertical-align and text-align, those are probably not needed then.

answered Jul 22 '19 at 19:18

Sascha Grindau

418
2
6
18

Trouble Vertically Centering Text onto Cube Face

1 Answers1