使用具有动态高度的CSS更改div的顺序，文本垂直对齐中间

Question

这是我的HTML代码：

<ul>
  <li>
    <div class="imgBox"><img 1></div>
    <div class="txtBox">text 1</div>
  </li>
  <li>
    <div class="imgBox"><img 2></div>
    <div class="txtBox">text 2</div>
  </li>
  <li>
    <div class="imgBox"><img 3></div>
    <div class="txtBox">text 3</div>
  </li>
  <li>
    <div class="imgBox"><img 4></div>
    <div class="txtBox">text 4</div>
  </li>
<ul>

桌面的预期结果是：

_____________________
|  img 1  |  txt 1  |
_____________________
|  txt 2 |   img2   |
_____________________
|  img 3  |  txt 3  |
_____________________
|  txt 4  |  img 4  |
_____________________

每个块宽：50％，图像宽度：100％到盒子，自动高度; 文本在框的中间，如display：table-cell; 文本对齐：中心; 垂直对齐：中部;

移动设备的预期结果是：

___________
|  img 1  |
___________
|  txt 1  |
___________ 
|  img 2  |
___________
|  txt 2  |
___________ 
|  img 3  |
___________
|  txt 3  |
___________ 
|  img 4  |
___________
|  txt 4  |
___________

一切都是宽度：100％到页面

如果我设置display：flex to li，我可以改变偶数行的顺序，但是，我没有找到使文本框100％高度，文本对齐中心的方法。 https://jsfiddle.net/wesleywai/phcgmopo/10/

如果我使用display：table to lia nd display：table-cell to div，我可以像原生表格一样使它达到100％高度，但我找不到更改顺序的方法： https ： //jsfiddle.net/ wesleywai / amm5mmvm / 2 /

我也试过方向：rtl; 和方向：ltr; 它似乎不适用于我的情况。

请帮忙。

Answer 1

降低height: 100% div规则的height: 100%

你可以放下vertical-align:middle; 因为它在这种情况下没有效果，如果你想垂直居中文本，我添加了一个新规则

.txtBox {
  display:flex;
  justify-content: center;
  align-items: center;
}

 ul{ display:block; margin:0; padding:0; } li{ display:flex; width:100%; height:auto; } div{ display:block; width:50%; text-align:center; background:#fcc; } .txtBox { display:flex; justify-content: center; /* horizontal - when flex row */ align-items: center; /* vertical - when flex row */ } li:nth-child(even) .imgBox{ order:2; } img{ width:100%; height:auto; display:block; } @media screen and (max-width: 68px) { li{ display:block; } div{ width:100% } .txtBox{ padding:20px; width:calc(100% - 40px); } } 

 <ul> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/27714/pexels-photo-27714.jpg?h=350&auto=compress'> </div> <div class="txtBox"> FLOWER 1 </div> </li> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/132419/pexels-photo-132419.jpeg?h=350&auto=compress'> </div> <div class="txtBox"> FLOWER 2 </div> </li> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/103573/pexels-photo-103573.jpeg?h=350&auto=compress'> </div> <div class="txtBox"> FLOWER 3 </div> </li> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/132474/pexels-photo-132474.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'> </div> <div class="txtBox"> FLOWER 4 </div> </li> </ul> 

Answer 2

我的显示表解决方案：

 ul{ display:block; margin:0; padding:0; } li{ display:table; width:100%; height:auto; } div{ display:table-cell; width:50%; text-align:center; vertical-align:middle; background:#fcc; } li:nth-child(even) { direction: rtl; } img{ width:100%; display:block; } @media screen and (max-width: 768px) { li{ display:block; } div{ width:100%; display:block; } .txtBox{ padding: 20px 0; } } 

 <ul> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/27714/pexels-photo-27714.jpg?h=350&auto=compress'> </div> <div class="txtBox"> FLOWER 1 </div> </li> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/132419/pexels-photo-132419.jpeg?h=350&auto=compress'> </div> <div class="txtBox"> FLOWER 2 </div> </li> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/103573/pexels-photo-103573.jpeg?h=350&auto=compress'> </div> <div class="txtBox"> FLOWER 3 </div> </li> <li> <div class="imgBox"> <img src='https://images.pexels.com/photos/132474/pexels-photo-132474.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'> </div> <div class="txtBox"> FLOWER 4 </div> </li> </ul> 

Answer 3

您可以使用CSS Flexbox 。

要更改每秒<li>的顺序，您可以使用CSS Flexbox的flex-direction: row-reverse属性，它将更改<li>元素的顺序。

在txtBox上使用align-self: stretch属性，使其高度为100％。

看看下面的代码：

 ul { list-style: none; padding: 0; margin: 0; } li.list { display: flex; justify-content: center; align-items: center; padding: 20px 0; border-bottom: 1px solid #ddd; } /* Changing the order for every 'even' element */ li.list:nth-child(even) { flex-direction: row-reverse; } /* On Mobiles */ @media screen and (max-width: 767px) { li.list { flex-direction: column; } li.list:nth-child(even) { flex-direction: column; } } .txtBox { display: flex; align-self: stretch; align-items: center; justify-content: center; padding: 0 20px; background: #eee; } 

 <ul> <li class="list"> <div class="imgBox"><img src="http://placehold.it/60/60"></div> <div class="txtBox">text 1</div> </li> <li class="list"> <div class="imgBox"><img src="http://placehold.it/60/60"></div> <div class="txtBox">text 2</div> </li> <li class="list"> <div class="imgBox"><img src="http://placehold.it/60/60"></div> <div class="txtBox">text 3</div> </li> <li class="list"> <div class="imgBox"><img src="http://placehold.it/60/60"></div> <div class="txtBox">text 4</div> </li> <ul> 

了解有关CSS Flexbox的更多信息

希望这可以帮助！

Answer 4

如果你不介意将txtBox的内容包装在另一个DIV中，你可以设置div的内容

top: 50%;
transform: translateY(-50%);

确保它垂直居中。

这是一个工作示例：
https://jsfiddle.net/gfd0ta98/