3

我让 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;
}

我得到display: table了那里的文字。如果我删除它，文本将不会在 div 中居中。

现在我遇到了溢出问题：隐藏。在FireFox和IE中溢出：如果有display: table.

Google Chrome和Safari既支持display: table又Overflow:hidden一起支持。

注意：它必须是纯 CSS。所以我不能使用任何javascript。

谢谢

4

2 回答 2

7

对于 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,255,0.5); /* applied to entire cell */
}

我能够在父元素中剪辑图像，并根据需要定位表格/表格单元格。

见演示：http: //jsfiddle.net/audetwebdesign/JpMXP/

后记

我没有时间深入查看您的样式表或调查表格/表格单元如何与overflow: hidden. 但是，这种方法似乎有效并且相对容易理解。

于 2013-05-29T21:49:27.560 回答
0

我建议你在你的 CSS 中删除：

display: table

并将 top 和 left 属性赋予：

.vertical-smallborder .text

然后，如果一个文本较长，则所有文本都将对齐，因为它们具有相同的顶部起点。会更美。

于 2013-05-29T21:32:23.993 回答