Question

所以我有这个代码来显示图库。我想放置＆＃34; box-text＆＃34;每个图像中间的类。但如果我想要使用位置：相对它不起作用。无论我如何在css中设置top属性，文本都不想高于图像的底部。

opacityAnimation.setAttribute( 'mesh.material', 'opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );

我的CSS样式：

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

Answer 1

使用position：absolute而不是？您还可以使用transform：translate来帮助进行居中：

.box {
  position: relative;
}
.box-text{
  position: absolute;
  top:50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50% -50%);
}

Flexbox图库上的响应文本覆盖

1 个答案: