Wesleywai Wesleywai - 20 days ago 18
CSS Question

changing div's order with css with dynamic height, text vertical align middle

here's my HTML code:

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


the expected result in desktop is:

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


each block width:50%, images width:100% to the box, auto height;
text in the middle of the box, like display:table-cell; text-align:center; vertical-align:middle;

and expected result on mobile is:

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


everything is width:100% to the page

If I set display:flex to li, I can change the order of even row's,
however, I don't find the way to make the text box 100% height, text align center.
https://jsfiddle.net/wesleywai/phcgmopo/10/

If I use display:table to lia nd display:table-cell to div, I can make it 100% height like a native table cell but I don't find the way to change the order:
https://jsfiddle.net/wesleywai/amm5mmvm/2/

I've also tried direction: rtl; and direction: ltr; and it don't seem to be working on my case.

please help.
Thanks

Answer

Drop the height: 100% on the div rule

You can drop the vertical-align:middle; too since it has no effect in this case, and if you want to vertical center the text, I added a new rule

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

Comments