Question

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

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

#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

试试这个，

.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 2

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 3

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 4

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

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

Answer 5

你可以简单地将你的标题包装在另一个div中并以transate为中心（当然包含所有前缀），或者你可以简单地使用表格（table + table-cell）居中 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

在中心悬停时显示缩略图标题

6 个答案: