Align text in the centre of an image slider - html

Question

I have a image slider and I am trying to align some explanatory text in the horizontal and vertical centre of each image.
How can I archieve this in HTML/CSS?
Here is my Slider: jsbin
// Note I edited ur jsbin - now the text is visible and the question clear.

Answer 1

You could make a CSS class that looks like:
display:block;
line-height:*same as your slider height*;
margin:0 auto;
position:relative;
z-index:99;
and put within the slider. Some tweaks have to be made to that CSS but the basic idea remains.

Answer 2

Use following HTML and CSS
<article>
<div class="text">hihihi</div>
<img alt="an interesting rock" src="http://placehold.it/300x300/123456/000000/&text=1">
</article>
.text {
color: white;
height: 300px;
position: absolute;
top: 47%;
width: 100%;
}
#slides article {
float: left;
position: relative;
width: 25%;
}

Answer 3

You need to do two changes.
Add position:relative to the parent.
#slides article
{
width:25%;
float:left;
position:relative;
}
Add positions(top, left, bottom, right) to your text class.
.text
{
position:absolute;
display:table;
width:100%;
color:#fff;
height:30px;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
}
The display:table property and fixing some small height with margin:auto will do the magic.
FIDDLE DEMO