将 div 的顺序更改为 CSS，动态高度，文本垂直居中

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

每个块width:50%，图像width:100%到框，自动高度；框中间的文本，如 display:table-cell；文本对齐：居中；垂直对齐：中间；

移动设备上的预期结果是：

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

页面的所有内容都 width:100%

如果我将 display:flex 设置为 li，我可以更改偶数行的顺序，但是，我找不到使文本框 100% 高度、文本居中对齐的方法。 https://jsfiddle.net/wesleywai/phcgmopo/10/

如果我使用 display:table 将 display:table-cell 连接到 div，我可以将其设置为 100% 高度，就像原生 table 单元格一样，但我没有找不到更改顺序的方法： https://jsfiddle.net/wesleywai/amm5mmvm/2/

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

请帮忙。

Answer 1

在 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

您可以使用 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 3

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

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

确保它垂直居中。

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

Answer 4

我的显示解决方案 table:

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>

将 div 的顺序更改为 CSS，动态高度，文本垂直居中

Changing div's order with CSS with dynamic height, text vertical align middle

html

css

flexbox

css-tables