Question

我希望将悬停文字叠加层垂直居中，这是响应式的。我试过了

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

造型。这使div的左上角与文本叠加居中，但不是文本本身。

这是一个jsfiddle： https://jsfiddle.net/q29edzLx/

有没有办法使用top / left转换来使文本本身居中？

我确实引用了How to center an element horizontally and vertically?，但我无法使用其他方法，例如vertical-align工作。

非常感谢 -

Answer 1

您可以使用css属性vertical-align: middle。但只有在元素的display属性设置为table-cell时才会起作用。请参考这个小提琴。 https://jsfiddle.net/josangel555/zamg95fj/

Answer 2

这是你小提琴的工作版本：https://jsfiddle.net/q29edzLx/2/

＆＃13;

   #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%;

}
}

＆＃13;

<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>

＆＃13;

垂直居中文本叠加

2 个答案: