将文本垂直对齐缩略图图像的中间位置

Question

我有一些缩略图，悬停时有多色悬停样式（看起来像这样，黄色缩略图就是当你将鼠标悬停在它上面时的样子）

唯一的问题是，我无法将内部文本放在缩略图中间垂直对齐而不会破坏其他内容。当我改变.thumb来显示：table;和.align-mid显示：table-cell;垂直对齐：中间;文本与中间对齐，但背景颜色变得不透明。看起来像这样：

我似乎无法弄清楚如何做到这一点。

HTML：

<div class="thumb" onclick="location.href='{{ cms:page:thumb_one.link:string }}'">
    {{ cms:page_file:thumb_one.image:image}}
    <div class="align-mid">
        {{ cms:page:thumb_one.text:string }}<br>
        {{ cms:page:thumb_one.description:string }}
    </div>
    <div class="yellow">
    </div>
</div>

CSS：

.thumb {
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   display:inline-block;
   position: relative;
   height: 170px;
   width: 235px;
   overflow: hidden;
}
.thumb:after {
   background: rgba(255,255,255,.7);
   content:'';
   display: block;
   height: 170px;
   left: 0;
   opacity: 0;
   padding: 20px;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
}

.thumb:hover:after {
   opacity: 1;
   padding: 20px;
   transition: opacity .4s;
}

.thumb:hover > .align-mid {
   background-color: transparent;
   color: white;
}

.thumb:hover {
   cursor: pointer;
}

.thumb img {
     height: 100%;
     width: 100%;
}   

.yellow {
     opacity: 0;
}  

.thumb:hover .yellow {
   background: rgba(255,213,43,.8);
   content:'';
   display: block;
   left: 13px;
   right: 13px;
   bottom: 13px;
   top: 13px;
   opacity: 1;
   position: absolute;
   transition: opacity .4s;
   z-index: 2;
}

.align-mid {
   background-color: rgba(0,0,0,.5);
   color: rgb(255,213,43);
   height: auto;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
   top: -105px;
   width: 100%;
   z-index: 3;
}

Answer 1

很明显，当你的包装器不止一个孩子，并且所有的孩子都被视为表格单元格时，如果你不希望它们垂直堆叠（y轴），你必须为每个子句分配绝对定位，这样它们会堆叠在一起（z轴）

所以一个简单的解决方案是：

.thumb img { height: 100%; width: 100%; position:absolute; }