html - 文本未垂直对齐

Question

我试图在垂直对齐的帮助下更改我的文本在框中的显示方式的布局，但它对代码没有影响。

我希望文本从前面框的框底部中心开始，

翻转时，后狐从禁区顶部中心开始。

还有办法让文本适合方框吗？

我正在使用 flexboxes 来获得响应式布局。

.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>

Answer 1

添加这个样式

.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>