使用具有動態高度的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/