CODEWITHSUNDEEP
csshtml
desmeit
desmeit

Reputation: 650

div with text, overlay and image

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

Upvotes: 1

Views: 2635

Answers (1)

Dave L
Dave L

Reputation: 411

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

Upvotes: 3

Related Questions