1

I want to align the text in the middle (Horizontal & Vertical) of each single box:

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>

I think there is a problem with the nested divs: https://jsfiddle.net/brL822vb/

enter image description here

Improve this question

1 Answer 1

Reset to default
3

The trick I use is Table and Table Cells to use the vertical-align property.

You seem to have a lot of tags inside that element where its not really needed - these are the 3 you need and I think you can make your example work nicely by stripping down.

Put your background image on the Box, the Overlay is your semi transparent layer, and the span is your text.

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%; }

See JSFiddle Here

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Great! Thanks a lot!
Your welcome. Don't forget to accept the answer if it solves your problem :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.