参见英文答案 >
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>
原文地址:https://www.jb51.cc/html/242668.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。