текст центра внутри div of img

Question

Я пытаюсь центрировать (по горизонтали и вертикали) текст внутри изображения, но я не уверен, как это сделать.

Вертикальное выравнивание и выравнивание по тексту не работают, и указание ширины и высоты, похоже, не приводит к какому-либо решению.

HTML:

<a href="#" class="fadeBlack"> 
<span class="blackBG"> 
    <p class="picDisc">TEST</p> 
    <img src="http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" width=100% height=100%> 
</span> 

CSS:

.photoGallery img { 
background: #181818 no-repeat; 
border-radius: 10px; 
} 
.blackBG { 
display: inline-block; 
background: #000000; 
border-radius: 10px; 
} 
.picDisc { 
position: absolute; 
vertical-align: middle; 
text-align: center; 
} 
a.fadeBlack img { 
display: block; 
-webkit-transition: all 0.5s linear; 
-moz-transition: all 0.5s linear; 
-ms-transition: all 0.5s linear; 
-o-transition: all 0.5s linear; 
transition: all 0.5s linear; 
} 
a.fadeBlack:hover img { 
opacity: 0.6; 
background-color: #000; 
} 

Вот мой JSFiddle.

Answer 1

Используйте left: 50%, top: 50% и transform: translate(-50%, -50%) в центре .picDisc по вертикали и по горизонтали.

Updated Fiddle

.photoGallery img { 
 
    background: #181818 no-repeat; 
 
    border-radius: 10px; 
 
} 
 
.blackBG { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
} 
 
.picDisc { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    z-index: 1; 
 
} 
 
a.fadeBlack img { 
 
    display: block; 
 
    -webkit-transition: all 0.5s linear; 
 
    -ms-transition: all 0.5s linear; 
 
    transition: all 0.5s linear; 
 
} 
 
a.fadeBlack:hover img { 
 
    opacity: 0.6; 
 
    background-color: #000; 
 
}

<a href="#" class="fadeBlack"> 
 
    <span class="blackBG"> 
 
     <p class="picDisc">TEST</p> 
 
     <img src="http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" width="100%" height="100%" /> 
 
    </span> 
 
</a>