更改div的顺序与动力高度CSS，文本垂直居中对齐

这里是我的HTML代码：更改div的顺序与动力高度CSS，文本垂直居中对齐

<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％至页面

如果我设置显示：弯曲，以利，我可以改变的，甚至排的顺序，但是，我没有找到使文本框100％高度，文本对齐中心的方式。 https://jsfiddle.net/wesleywai/phcgmopo/10/

如果我使用显示：表LIA ND显示：表细胞div的，我可以把它100％的高度本地人一样的表格单元格，但我没有找到更改顺序的方式： https://jsfiddle.net/wesleywai/amm5mmvm/2/

我也试过方向：rtl;和方向：ltr;而且似乎并没有对我的案件起作用。

请帮忙。

来源

2016-11-13 Wesleywai

'我不觉得让文本框中键入100％的方式height'。哪个文本框？我看不到它在代码中的位置。 –

他的意思是包含文本的div（box）:) – Dekel

降height: 100%上div规则

您可以删除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>

来源

2016-11-13 11:11:03 LGSon

谢谢，div现在是自动调整高度。但无论如何，使文本vertical-align：中间像在表格单元格？ – Wesleywai

在这里得到了我的投票:) – Dekel

非常感谢，我认为这是答案！ – Wesleywai

您可以使用CSS Flexbox。

要更改每秒的顺序<li>，您可以使用CSS Flexbox的flex-direction: row-reverse属性，该属性将更改<li>元素的顺序。

使用align-self: stretch财产上txtBox，要实现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

希望这有助于！

来源

2016-11-13 11:12:46

嗯... OP已经使用flexbox ....？，问题是文本框的大小，所以如果你正确地阅读这个问题，你会看到 – LGSon

@LGSon哦！我的不好，但如果我们在'txtBox'上使用'align-self：stretch'属性，我们也可以使txtBox的高度为100％。 @Wesleywai请看看，如果你仍然需要帮助，请告诉我。 –

通过减少'高度：100％'它会自动调整，所以不需要任何额外的属性 – LGSon

如果你不介意包裹txtBox的另一个DIV的内容，你可以设置div的内容与

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

为了确保它的垂直居中。

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

来源

2016-11-13 11:24:49 Dekel

这是更简单...检查我的回答 – LGSon

css总是给你多种解决方案:) – Dekel

我与显示解表：

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>

来源

2016-11-13 11:40:40 skav3n

这是一个适用于旧版浏览器， +1 – LGSon

更改div的顺序与动力高度CSS，文本垂直居中对齐

回答

相关问题