以填充/边距为中心的缩略图悬停标题？答案

【问题标题】：Thumbnail hover caption centered with padding/margin?以填充/边距为中心的缩略图悬停标题？
【发布时间】：2015-02-17 23:15:35
【问题描述】：

我想创建一个垂直和水平居中的白色悬停标题。围绕它，我想添加相同的填充/边距，并在一些填充/边距内，标题/标题居中，水平和垂直。

因为一切都是响应式的，我认为最好对大多数元素使用 %。也许缩略图/标题（html）的结构需要不同的写法，我现在有点卡住了。

在示例图像中，我添加了一些红色标记我的意思。

示例：

---> FIDDLE

    <div class="col-4">
    <a class="thumb" href="#">
        <img src="http://fakeimg.pl/500x330/ccc/">
        <div class="caption"><span>Project title centered vertical and horizontal</span></div>
    </a>
    </div>

【问题讨论】：

也许How to center an element horizontally and vertically?这个问题可能会有所帮助。
感谢 Josh，看起来第一个选项不需要那么多代码。浏览器对变换的支持： translateX(-50%) translateY(-50%);够好吗？

标签： html css thumbnails caption

【解决方案1】：

一个选项可以是在span 元素上使用inline-block 来垂直algin，对于空格使用padding 和box-sizing 在标题上。检查这个：

.caption {
  position: absolute;
  width: 80%; 
  height: 80%;
  top: 10%; 
  left: 10%;
  background-color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-sizing:border-box;
  padding:5px;
}
.caption span {
  display: inline-block;
  opacity: 0;
  vertical-align:middle;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: white;
}
.caption:before {
    content:" ";
    height:100%;
    width:0;
    display:inline-block;
    vertical-align:middle;
}

DemoFiddle

【讨论】：

感谢您的帮助，但是白色正方形顶部/底部/左侧/右侧周围的填充/边距和白色正方形内的填充大小相同，所以标题不会一直到结束了吗？
@Foroloca 在父级上使用填充和框大小：jsfiddle.net/bh14xdwr/7
好的，你知道白色方块周围的大小相同吗，现在顶部和底部的填充/边距小于左右。
@Foroloca 会很棘手，因为 left 和 top 的空间是相对于高度和宽度的，而这些值只是不同....但是如果图像的比例始终是您可以更改的适合的值：jsfiddle.net/bh14xdwr/8
图像比例总是一样的，奇怪的是这么简单的东西一定很难编码。所以周围的填充/边距不能是相同的值，如 20px 或 5% 等，而不是计算技巧 72% 等？

【解决方案2】：

检查这个fiddle。

将父级显示为表格单元格并使用垂直对齐使所有内容居中

.block {
   background-color: #eee;
   min-height: 200px;
   display: table-cell;
   vertical-align: center;
   text-align: center;
}
.block-contents {
   background-color: #fff;
   padding: 20px;
   margin: 20px;
}

【讨论】：

谢谢，但你能看到它在我现有的结构中工作吗，因为如果我这样使用它就行不通。

【解决方案3】：

你也总是可以绝对定位跨度。

.caption span {
    display: block;
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform: translate(-50%, -50%);
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: white;

}

JSfiddle Demo

【讨论】：