我正在制作Img悬停的乐趣.但是现在我的div中有一些文字.我用过代码:
display: table-cell; vertical-align: middle;
让文本以我的div为中心.我也有这个代码:
.vertical-smallborder{ position: relative; width: 217px; height: 350px; border: 5px solid white; outline: 1px solid #c8c8c8; float:left; display: table; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; overflow: hidden; }
我得到了显示:那边的文字表.如果我删除它,文本将不会在div中居中.
现在我遇到溢出问题:隐藏.在FireFox和IE溢出:隐藏不再工作,如果有display:table.
谷歌浏览器和Safari都支持显示:表格和溢出:隐藏在一起.
注意:它必须是纯CSS.所以我不能使用任何JavaScript.
谢谢
解决方法
对于Firefox – 概念验证
我创建了一个演示如下:
<div class="image-clipper"> <img src="http://placekitten.com/400/500" style="margin: -150px 0 0 -100px;" /> <div class="text-panel"> <div class="text-cell"> <h1>Overhemd<br/>24,95</h1> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p> </div> </div> </div>
并使用以下CSS:
.image-clipper { width: 250px; height: 300px; border: 5px solid red; overflow: hidden; position: relative; } .image-clipper .text-panel { position: absolute; top: 0; left: 0; display: table; height: 100%; } .image-clipper .text-cell { display: table-cell; vertical-align: middle; padding: 20px; /* works okay */ background-color: rgba(255,255,0.5); /* applied to entire cell */ }
我能够在父元素中剪切图像,并根据需要定位表/表格单元格.
见demo:http://jsfiddle.net/audetwebdesign/JpMXP/
后记
我没有时间深入审查您的样式表或调查表/表格单元格如何与overflow:hidden进行交互的完整细节.但是,这种方法似乎有效并且相对容易理解.