<分区>
<分区>
所以我有这段代码来显示图片库。我想在每张图片的中间放置“box-text”类。但是如果我想使用 position: relative 它是行不通的。文本不希望高于图像底部，无论我如何在 css 中设置 top 属性。
<div class="container">
<div class="box">
<img src="1.jpg" class="img-responsive">
<div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
</div>
<div class="box">
<img src="2.jpg" class="img-responsive">
<div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
</div>
<div class="box">
<img src="3.jpg" class="img-responsive">
<div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
</div>
</div>
我的 CSS 样式:
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.box img{
z-index: 1;
}
.box-text{
position: relative;
top:50%;
left: 50%;
z-index: 2;
}
最佳答案
使用 position: absolute 代替？您还可以使用 transform: translate 来帮助居中:
.box {
position: relative;
}
.box-text{
position: absolute;
top:50%;
left: 50%;
z-index: 2;
transform: translate(-50% -50%);
}
关于html - Flexbox 图片库上的响应式文本叠加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47163724/