html - 将文本在缩略图的中间垂直对齐

Question

我有几个悬停时具有多色悬停样式的缩略图(看起来像这样，黄色缩略图是您将鼠标悬停在其上时的样子)

唯一的问题是我无法在不破坏其他内容的情况下让内部文本在缩略图中间垂直对齐。当我将 .thumb 更改为 display: table;和 .align-mid 显示:表格单元格；垂直对齐:中间；文本对齐到中间但背景颜色变得不透明。看起来像这样:

我似乎无法弄清楚如何实现这一目标。

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