Can not center text on image hover - html

Question

I am setting up a new homepage for my website. It will have a 2x2 grid of four images that change size with the window and they'll all have a hover text. I was able to do everything so far but I got stuck at one point, which possibly have an easy answer that I can't find. When I hover over the image, I want to make the text centered, no matter what the size of the window is. But I can not find the proper way to do it. The methods I've tried either don't center it both vertically and horizontally or the text goes off center when I resize the window. Any help would be appreciated. Thank you!
Here's my code: jsfiddle
HTML
<section id="photos">
<img src="image1"><span>GALLERY ONE</span>
<img src="image2"><span>GALLERY TWO</span>
<img src="image3"><span>GALLERY THREE</span>
<img src="image4"><span>GALLERT FOUR</span>
</section>
CSS
#photos {
/* Prevent vertical gaps */
line-height: 0;
margin-left:150px;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
a.darken {
display: inline-block;
background: black;
padding: 0;
position:relative;
}
a.darken img {
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a.darken:hover img {
opacity: 0.3;
}
a.darken span{visibility:hidden; font-size:16px;}
a.darken:hover span{color:#fff; visibility:visible;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

Answer 1

This wont work in older browsers, but you can use a combination of "translate" and absolute positioning to vertically and horizontally align the text. Just add the following:
a.darken span{
visibility:hidden;
font-size:16px;
/* new styles below: */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 100%;
}
Here is an example:
http://jsfiddle.net/bk2Sd/2/

Answer 2

You need to add these styles to the <span>:
position: absolute;
top: 50%;
left: 35%;
You can play with these values until you get it where you want. Here is a working example.

Answer 3

Since your a.darken selector already has relative positioning enabled, you can enable absolute positioning on the span attribute.
http://jsfiddle.net/EfrainReyes/bk2Sd/4/
a.darken span {
display: block;
height: 100%;
width: 100%;
visibility:hidden;
position: absolute;
top: 50%;
font-size:16px;
}
I added display: block and full height and width so I could use text-align: center on the a.darken selector.

Answer 4

I propose something little more generic.
Since the size of the images is not known we can center horizontally the text using the text-align property and then centre it vertically by using an absolutely positioned element with top set to 50%.
Code to add:
a.darken span {
width: 100%;
text-align: center;
top: 50%;
left: 0
position: absolute;
}
http://jsfiddle.net/bk2Sd/5/