文字未垂直对齐

时间：2018-07-18 12:31:57

标签： html css web

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

我希望文本从前框和框的底部居中开始

从后狐狸翻转时从框的顶部中央开始。

还有一种方法可以将文本放入框中？

我正在使用flexbox获取响应式布局。

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

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题