Text not getting vertically aligned

Question

I tried to change the layout of how my text is being shown in the box with the help of vertically-align but it has no affect on the code.

I want the text to start from the bottom center of the box for the front boxes and

To start from Top center of the box for the back foxes when it flips.

Also is there a way to fit the text into the boxes?

i'm using flexboxes to get a responsive layout.

.flexbox {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.panels {
  list-style-type: none;
  padding: 0;
  width: 100%;
  margin: 2% auto;
}

.panels li {
  position: relative;
  width: 20%;
  margin: 5px;
  display: block;
  box-sizing: border-box;
  float: left
}

.panels li div {
  width: 100%;
  padding: 50% 0;
  text-align: center;
  vertical-align: text-bottom;
  cursor: pointer;
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
}

.panels div.back {
  background: linear-gradient(to bottom, #e40000, #f07611);
  transform: rotateY(90deg);
  height: 18px;
  vertical-align: text-bottom;
  font-family: Cabin;
  color: #3d4250;
  position: absolute;
  left: 0;
  top: 0;
}

.panel div.front {
  vertical-align: text-top;
  background: white;
  font-family: Cabin;
  font-size: 24px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #3d4250;
  position: relative;
}


/*// ANIMATION STYLES //*/

.panels li:hover div.front {
  animation: twirl 0.2s ease-in forwards;
}

.panels li:hover div.back {
  animation: twirl 0.2s 0.2s ease-in forwards reverse;
}

@keyframes twirl {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}

<ul class="panels flexbox">
  <li class="rcol">
    <div class="front" style="vertical-align: text-bottom;">Sense of Purpose</div>
    <div class="back" style="font-size: 14px;">
      <b>Sense of Purpose</b><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  </li>
  <li class="rcol">
    <div class="front">Responsiblity</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Passion</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Proximity</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Values and respect</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Empowerment</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Opportunities</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Learning</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
</ul>

You can look up vertically align content in div. There are tons of solutions already — Gezzasa, Jul 18 '18 at 12:38
Possible duplicate of [How to vertically align into the center of the content of a div with defined width/height?](https://stackoverflow.com/questions/10968726/how-to-vertically-align-into-the-center-of-the-content-of-a-div-with-defined-wid) — Gezzasa, Jul 18 '18 at 12:39

score 1 · Accepted Answer · answered Jul 18 '18 at 12:41

Add this style

.panels li:hover div.back {
  height: 100%;
  top: 0;
  padding: 0;
}

.flexbox {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.panels {
  list-style-type: none;
  padding: 0;
  width: 100%;
  margin: 2% auto;
}

.panels li {
  position: relative;
  width: 20%;
  margin: 5px;
  display: block;
  box-sizing: border-box;
  float: left
}

.panels li div {
  width: 100%;
  padding: 50% 0;
  text-align: center;
  vertical-align: text-bottom;
  cursor: pointer;
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
}

.panels div.back {
  background: linear-gradient(to bottom, #e40000, #f07611);
  transform: rotateY(90deg);
  height: 18px;
  vertical-align: text-bottom;
  font-family: Cabin;
  color: #3d4250;
  position: absolute;
  left: 0;
  top: 0;
}

.panel div.front {
  vertical-align: text-top;
  background: white;
  font-family: Cabin;
  font-size: 24px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #3d4250;
  position: relative;
}


/*// ANIMATION STYLES //*/

.panels li:hover div.front {
  animation: twirl 0.2s ease-in forwards;
}

.panels li:hover div.back {
  animation: twirl 0.2s 0.2s ease-in forwards reverse;
  height: 100%;
  top: 0;
  padding: 0;
}

@keyframes twirl {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}

<ul class="panels flexbox">
  <li class="rcol">
    <div class="front" style="vertical-align: text-bottom;">Sense of Purpose</div>
    <div class="back" style="font-size: 14px;">
      <b>Sense of Purpose</b> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  </li>
  <li class="rcol">
    <div class="front">Responsiblity</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Passion</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Proximity</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Values and respect</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Empowerment</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Opportunities</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
  <li class="rcol">
    <div class="front">Learning</div>
    <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
</ul>

The white boxes are still coming to be centered aligned.Can we make that start from the bottom? — Srinabh, Jul 18 '18 at 13:03

Text not getting vertically aligned

1 Answers1