html css调整文本位置,html – 用CSS动态高度改变div的顺序,文本垂直对齐中间

降低高度：div规则的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);

}

}

• 

  FLOWER 1

• 

  FLOWER 2

• 

  FLOWER 3

• 

  FLOWER 4