文字未垂直對齊

Question

我試圖在垂直對齊的幫助下更改文本在框中顯示方式的布局，但這對代碼沒有影響。

我希望文本從前框的框的底部開始

從后狐狸翻轉時從盒子的頂部中央開始。

還有一種方法可以將文本放入框中？

我正在使用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> 

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>