Question

Before we start:
Please don’t close this as a duplicate of another question. I just searched here on Stackoverflow without finding that exact case.

The closest is I believe this question. Still, the replies given there don’t really work for me, I believe because the paragraph is set position: absolute;.

Thats the HTML:

<ul>
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>

And the CSS:

li {
  position: relative;
  float: left;
  overflow: hidden;
}

img {
  width: 100%;
  vertical-align: middle;
}

p {
  background-color: rgba(255, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

span {
    background-color: rgba(0, 255, 0, .3);
    vertical-align: middle;
}

Fiddle: http://jsfiddle.net/DpVjZ/

vertical-align: middle; just bumps the text a tiny bit away from the top, but not really in the middle.
Setting the span position: absolute; and then applying top: 50%; and then margin-top: -x%; won’t work because the height of the span is not known as it is dynamic content.
Although the linked question states that this is bad practice, I also tried the display: table-cell approach without any result. Please help me.

Answer 1

Get rid of the p tag. You already have it in a li anyway.

css

li {
position: relative;
float: left;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
}

span {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

html

<ul>
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>

Tested on window IE9 and Chrome.

Don’t know if it was for the demo or not but if you want the red shade over the image make a class for a span tag then insert a new span with the class.

span.text {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

span.redshade {
background-color: rgba(255, 0, 0, .3);
width: 100%;
height: 100%;

<ul>
<li><span class="redshade">&nbsp;</span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>