вертикально центр наложения текста

Question

Я ищу вертикально центр наложения текста наведения, который является отзывчивым. Я пробовал

position:absolute 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 

стайлинг. Это центрирует левый верхний край div с наложением текста, но не сам текст.

Вот jsfiddle: https://jsfiddle.net/q29edzLx/

Есть ли способ использовать преобразования с верхней/влево, чтобы центрировать сам текст?

Я сделал ссылку How to center an element horizontally and vertically?, но я не мог получить другие методы, такие как вертикальное выравнивание для работы.

Многие thanks--

Answer 1

Вы можете использовать свойство CSS vertical-align: middle. Но это будет работать, только если для свойства display элемента установлено значение table-cell. Пожалуйста, обратитесь к этой скрипке. https://jsfiddle.net/josangel555/zamg95fj/

Answer 2

Вот рабочая версия вашей скрипкой: https://jsfiddle.net/q29edzLx/2/

#rig { 
 
max-width:900px; 
 
margin:0 auto; /*center aligned*/ 
 
padding:0; 
 
font-size:0; /* Remember to change it back to normal font size if have captions */ 
 
list-style:none; 
 
} 
 
#rig li { 
 
display: inline-block; 
 
*display:inline;/*for IE6 - IE7*/ 
 
width:25%; 
 
vertical-align:middle; 
 
box-sizing:border-box; 
 
margin:0; 
 
padding:0; 
 
} 
 
    
 
/* The wrapper for each item */ 
 
.rig-cell { 
 
/*margin:12px; 
 
box-shadow:0 0 6px rgba(0,0,0,0.3);*/ 
 
display:block; 
 
position: relative; 
 
overflow:hidden; 
 
} 
 
    
 
/* If have the image layer */ 
 
.rig-img { 
 
display:block; 
 
width: 100%; 
 
height: auto; 
 
border:none; 
 
transform:scale(1); 
 
transition:all 1s; 
 
} 
 

 
#rig li:hover .rig-img { 
 
transform:scale(1.05); 
 
} 
 
    
 
/* If have the overlay layer */ 
 
.rig-overlay { 
 
position: absolute; 
 
display:block; 
 
top: 0; 
 
left: 0; 
 
bottom: 0; 
 
right: 0; 
 
margin: auto; 
 
background: #8d8d8d url(img/link.png) no-repeat center 20%; 
 
background-size:50px 50px; 
 
opacity:0; 
 
filter:alpha(opacity=0);/*For IE6 - IE8*/ 
 
transition:all 0.6s; 
 
} 
 
#rig li:hover .rig-overlay { 
 
opacity:0.8; 
 
} 
 

 
/* If have captions */ 
 
.rig-text { 
 
box-sizing:border-box; 
 
position:absolute; 
 
width:100%; 
 
text-align: justify; 
 
text-align-last: center; 
 
text-transform:capitalize; 
 
font-size:12px; 
 
font-weight:bold; 
 
font-family: 'Oswald', sans-serif; 
 
font-weight:normal!important; 
 
top: 50%; 
 
left: 50%; 
 
color:white; 
 
opacity:0; 
 
filter:alpha(opacity=0);/*For older IE*/ 
 
display: block; 
 
} 
 
#rig li:hover .rig-text { 
 
transform:translate(-50%,-50%); 
 
opacity:1; 
 
} 
 

 
@media (max-width: 9000px) { 
 
#rig li { 
 
    width:23%; 
 
\t margin-right:2%; 
 
\t margin-bottom:2%; 
 
} 
 
} 
 

 
@media (max-width: 992px) { 
 
#rig li { 
 
    width:31.25%; 
 
\t margin-right:2%; 
 
\t margin-bottom:2%; 
 

 
} 
 
} 
 

 
@media (max-width: 550px) { 
 
#rig li { 
 
    width:75%; 
 
\t \t \t margin-bottom:2%; 
 

 
} 
 
}

<ul id="rig"> 
 
    <li> 
 
     <a class="rig-cell" href="#"> 
 
      <img class="rig-img" src="images/awards/AIA.jpg"> 
 
      <span class="rig-overlay"></span> 
 
      <span class="rig-text">2015<br>AIA VT <br>Honor Award<br>Champlain Modern</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a class="rig-cell" href="#"> 
 
      <img class="rig-img" src="images/awards/HomeBuilder_Remodelers_Award.jpg"> 
 
      <span class="rig-overlay"></span> 
 
      <span class="rig-text">2014 <br> 
 
      HBRA<br> Better Homes Awards<br> Best Single Family<br>Sunset Cliff</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a class="rig-cell" href="http://static1.1.sqspcdn.com/static/f/404214/24775679/1398271103013/VTASLA+Fall+2013+Newsletter.pdf?token=5Ms0c1CrbEJrn%2FoM%2BVuLRA%2FlUT0%3D"> 
 
      <img class="rig-img" src="images/awards/AmericanSocietyLandscapeArchitects.jpg"> 
 
      <span class="rig-overlay"></span> 
 
      <span class="rig-text"> 2013 <br> 
 
      ASLA, Vermont<br> Award of Excellence<br>Quaker Bluff Residence</span> 
 
     </a> 
 
    </li> 
 
    </ul>