参见英文答案 >
Vertically centering a div inside another div23个
我想把我的放大镜垂直放在我的div的中心.
我想把我的放大镜垂直放在我的div的中心.
我该怎么做呢？
演示：http://jsfiddle.net/6ewn37gt/
span.text-content {
background: rgba(23,165,195,0.5);
color: white;
cursor: pointer;
display: table;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
ul li:hover span.text-content {
opacity: 1;
}
<ul>
<li>
<div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
<a href="#"></a>
<span class="text-content"><span><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
</div>
</li>
</ul>
解决方法
您可以向span元素添加类并应用以下样式：
span.text-content {
background: rgba(23,0.5);
color: white;
cursor: pointer;
display: table;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
ul li:hover span.text-content {
opacity: 1;
}
.imgCont {
display: table-cell;/*set display to table cell*/
vertical-align: middle;/*add vertical align middle*/
text-align: center;/*add text align to center for horizontal align too*/
}
<ul>
<li>
<div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
<a href="#"></a>
<span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
</div>
</li>
</ul>
