格文本，覆盖和图像

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

我使用的技巧是表和表格单元格以使用垂直对齐属性。

你似乎在那个元素里面有很多标签，它并不真正需要 - 这些是你需要的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