div与文本，叠加和图像

Question

我想在每个单独框的中间（水平和垂直）对齐文本：

HTML：

<div class="piclist"><a href="#" class="tag1"><span>Tag 1</span><div class="overlay"></div><div class="tabpic foto1" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"></div></a></div>
       <div class="piclist"><a href="#" class="tag2"><span>Tag 2</span><div class="overlay"></div><div class="tabpic foto2" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"></div></a></div>
       <div class="piclist"><a href="#" class="tag3"><span>Tag 3</span><div class="overlay"></div><div class="tabpic foto3" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"></div></a></div>
       <div class="piclist"><a href="#" class="tag4"><span>Tag 4</span><div class="overlay"></div><div class="tabpic foto4" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"></div></a></div>

我认为嵌套div有问题：https://jsfiddle.net/brL822vb/

Answer 1

我使用的技巧是Table和Table Cells使用vertical-align属性。

你似乎在那个元素里面有很多不需要它的标签 - 这些是你需要的3个，我认为你可以通过剥离使你的例子很好地工作。

将背景图片放在Box上，Overlay是半透明图层，span是你的文字。

HTML：

<div class="box">
   <div class="box-overlay">
   <span>Text</span>
   </div>
</div>

CSS：

.box{
  width:400px;
  height:400px;
  border:1px solid red;
}

.box-overlay{
  display:table;
  height:100%;
  background:rgba(0,0,0,0.5);
  width:100%;
}

.box-overlay span{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  height:100%;
  width:100%;  
}

请参阅JSFiddle Here