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设置为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规则

上

您也可以删除vertical-align:middle;，因为在这种情况下它不起作用，如果您想垂直居中文本，我添加了新规则

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

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

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>元素的顺序。

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

请看下面的代码段：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

详细了解CSS Flexbox

希望这有帮助！

Answer 4

如果您不介意将txtBox的内容包装在另一个DIV中，可以使用

设置该div的内容

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

确保它垂直居中。

这是一个有效的例子：
https://jsfiddle.net/gfd0ta98/

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

4 个答案: