<分区>
css - 在这种特定情况下如何将文本居中放置在 div 中？
如何使该框内的文本居中？
下面是我希望如何整理元素:
在较小的屏幕中，元素相互堆叠，包含我想要居中的文本的 .text-box div 具有固定的高度。对于较大的宽度，.text-box div 的高度应该等于较大图像的高度减去较短图像的高度
HTML
<div id="wrapper">
<div class="box">
<img class="img-large" src="http://placekitten.com/900/800" alt=""/>
</div>
<div class="box">
<img src="http://placekitten.com/900/400" alt=""/>
</div>
<div class="box-text">
<div class="vcenter-outer">
<div class="vcenter-inner">
<p>center this text vertically</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
background: #ffeaea;
height: 100vh;
}
img {
width: 100%;
display: block;
}
.img-large {
height: 100vh;
width: auto;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
}
.box-text {
text-align: center;
background: yellow;
height: 100%;
}
@media only screen and (min-width: 768px) {
.box {
float: left;
width: 50%;
}
}
.vcenter-outer {
background: yellow;
display: table;
}
.vcenter-inner {
background: lightblue;
display: table-cell;
vertical-align: middle;
}
为什么 .text-box div 跨越整个包装器？
最佳答案
基本上你可以同时使用 display:flex 和 float
.trio {
height:100vh;
width:100vh;
}
.trio>div {
float:left;
display:flex;
align-items:center;
justify-content:center;
width:50vh;
height:50vh;
box-shadow:inset 0 0 0 2px;
}
.trio .first {
height:100vh;
}<div class="trio">
<div class="first">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
</div>display:table 也可以像你一样使用额外级别的 div 来工作，同样的想法:float + vh
关于css - 在这种特定情况下如何将文本居中放置在 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28440879/