縦にテキストのオーバーレイを中央に配置

Question

私は、縦にホバーのテキストオーバーレイを中央に配置することを検討しています。私は試してみた

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

スタイリング。これにより、divの左上がテキストオーバーレイで中央揃えされますが、テキスト自体は中央に配置されません。 https://jsfiddle.net/q29edzLx/

/トップで変換を用いるテキスト自体を中央に左にする方法はあります：ここで

はjsfiddleのですか？

私は参照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>