在缩略图图像的中间垂直对齐文本答案

【问题标题】：Align text vertically middle of thumbnail image在缩略图图像的中间垂直对齐文本
【发布时间】：2014-06-01 04:50:41
【问题描述】：

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

唯一的问题是我不能让里面的文本在缩略图中间垂直对齐而不破坏其他东西。当我将 .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;
}

【问题讨论】：

如何在 div 中插入图片？
是通过CMS动态完成的，不过这是{{ cms:page_file:thumb_one.image:image}}被转换成图片标签
啊哈这就是为什么 css 搞砸了
试试这个：.thumb img { height: 100%;宽度：100%；位置：绝对； }
轰隆隆。哈哈不敢相信就这么简单。如果您将其放在答案中，我会将其标记为正确。非常感谢！

标签： html css image hover

【解决方案1】：

很明显，当您的 wrapper 有多个 child 并且所有 child 都被视为表格单元格时，如果您不希望它们垂直堆叠（y 轴），您必须为每个 child 分配绝对定位，这样它们将堆叠在一起（z轴）

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

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

【讨论】：