在悬停居中显示缩略图标题

Question

我试图在悬停居中显示缩略图标题：水平和垂直对齐，但不成功。

在小提琴中，您会看到一个响应式缩略图网格，悬停时带有标题。我给了它一个红色的虚线边框，所以你可以看到它与缩略图的大小不同。我无法让标题标题在缩略图中居中。也许我的缩略图网格需要不同的构建。希望有人可以帮助我。

Here is the fiddle

#content {
position: relative;
display: inline-block;
margin: 110px 40px 100px 40px;
background-color: transparent;
}

.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}

.thumb {
display: block;
margin: 10px;
}

.col-25 img {
width: 100%;
height: auto;
}

.col-25 a:hover img {
opacity: 0.1;
}

.caption {
position: absolute;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:100%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.col-25 a:hover .caption {
opacity: 1;
}

Answer 1

http://jsfiddle.net/a0zwecou/14/

我在标题中添加了一个内部 div，并为其设置了 25% 的边距高度。删除媒体查询中宽度极小的边距。

    <div class="caption">
          <div class="inner-caption">
              <h3>Untitled for now</h3>
              <p>Caption</p>
          </div>
    </div>

CSS -

.inner-caption{margin-top:25%;}

Answer 2

JSFIIDLE

仅通过更改高度和向标题类添加填充。

.caption {
position: absolute;
padding-top:25%;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:60%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

Answer 3

试试这个，

.thumb:hover{border:1px dashed red;background-color:red;}

.caption {
position: absolute;
top:40%;
left:0;
/*border: dashed 1px red;*/ //remove it
width:100%;
/*height:100%;*/ // remove it
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
 transition: all 0.3s;
 }

小提琴：http://jsfiddle.net/a0zwecou/20/

Answer 4

请看这里的小提琴： http://jsfiddle.net/a0zwecou/13/ 并添加css：

.caption h3 {
    margin-top: 59px;
}

Answer 5

您可以简单地将您的标题包装在另一个 div 中并使用 transate 将其居中（当然要使用所有前缀），或者您可以使用表格（表格 + 表格单元格）简单地将其居中
HERE THE PEN，将第一个悬停.

.insideCap{
  background: red;
  top: 50%;
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
}

其他方式：

parent{
  dispaly:table;
}
son{
  display: table-cell;
  vertical-align: middle;
}

Answer 6

you can try this:
<div id="content">


HTML:
Add this div:

    <div class="col-25">
            <a class="thumb" href="#">
                <img src="http://fakeimg.pl/500x310/999/">
                    <div class="caption"><div class="caption-text"><h3>Untitled for now</h3><p>Caption</p></div></div>
            </a>
        </div>

CSS:
add this css in your style:
.caption-text {
    left: 0;
    position: absolute;
    right: 0;
    top: 32%;
}   

见JS Fiddle DEMO