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

Question

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

4

以下是我的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； text-align：center； vertical-align：middle；在移动设备上的预期结果是：

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

页面中一切都是宽度100%。

如果我将li的display属性设置为flex，则可以更改甚至行的顺序，但是我无法找到使文本框高度100％、文本居中的方法。 https://jsfiddle.net/wesleywai/phcgmopo/10/

如果我将lia的display属性设置为table，div的display属性设置为table-cell，则可以使其像本机表格单元格一样具有100％的高度，但我无法找到更改顺序的方法： https://jsfiddle.net/wesleywai/amm5mmvm/2/

我还尝试了direction:rtl;和direction:ltr;，但在我的情况下似乎不起作用。

请帮帮我。

- Wesleywai

我找不到让文本框高度达到100%的方法。哪个文本框？我在代码中找不到它的位置。 - Mosh Feu

他指的是包含文本的 div（盒子） :) - Dekel

4个回答

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>

- skav3n

1

那是一个适用于旧版浏览器的巧妙变体，加一。 - Asons

0

您可以使用 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的内容。

希望这能帮到你！

- Saurav Rastogi

嗯...楼主已经使用了flexbox了吗？问题是文本框的大小，所以如果你仔细阅读问题，就会发现。 - Asons

@LGSon 哎呀！我弄错了，但是如果我们在txtBox上使用align-self: stretch属性，就可以让txtBox的高度也变成100%。 @Wesleywai请看一下，并告诉我是否还需要帮助。 - Saurav Rastogi

通过删除 height: 100%，它会自动调整，因此不需要任何额外的属性。 - Asons

0

如果您不介意将txtBox的内容包装在另一个DIV中，您可以使用以下方式设置该div的内容：

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

为了确保它在垂直方向上居中。

这里有一个可行的例子：
https://jsfiddle.net/gfd0ta98/

- Dekel

1

这很简单，只需检查我的答案。 - Asons

CSS总是给你多种解决方案 :) - Dekel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

删除

规则中的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>