0

I am looking to vertically center a hover text overlay, that is responsive. I've tried the

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

styling. This centers the top left of the div with the text overlay, but not the text itself.

Here is a jsfiddle: https://jsfiddle.net/q29edzLx/

Is there a way to use transform with top/left to center the text itself?

I did reference How to center an element horizontally and vertically?, but I could not get other methods, like vertical-align to work.

Many thanks--

Community
  • 1
  • 1
user3808123
  • 51
  • 3

2 Answers2

1

Here's a working version of your fiddle: 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%;
 margin-right:2%;
 margin-bottom:2%;
}
}

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

}
}

@media (max-width: 550px) {
#rig li {
    width:75%;
   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>
junkfoodjunkie
  • 3,168
  • 1
  • 19
  • 33
  • I see it is centered horizontally, but is there a way to center the text vertically, given that each text box will have variable line lengths? That's what I've been struggling with. The text in the jsfiddle you provided still looks low, as opposed to center. Thx-- – user3808123 Nov 01 '16 at 18:44
  • Sorry about that, it was a slight error on my part (copying and deleting some code, I left the wrong part in). Look at the updated example, please. – junkfoodjunkie Nov 01 '16 at 18:52
0

You can use the css property vertical-align: middle. But that will work only if the display property of the element is set to table-cell. Please refer this fiddle. https://jsfiddle.net/josangel555/zamg95fj/

Jos
  • 2,015
  • 1
  • 17
  • 22