格文本，覆蓋和圖像

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