[英]html / css: display table-cell not centering text in firefox
將鼠標懸停在div上方會在頂部的另一個div中變得不透明,並且某些文本會完美地位於div內部。 這似乎在所有瀏覽器(Firefox除外)上都可以正常工作。
這是一個jsfiddle演示: http : //jsfiddle.net/neal_fletcher/WHCNF/
HTML:
<div class="grid-block identity" style="background-image: url('http://placekitten.com/380/250');">
<div class="grid-block-text-hover-wrap">
<div class="grid-block-text-wrap">
<div class="grid-block-text-title">TITLE</div>
<div class="grid-block-text-subtitle">SUBTITLE</div>
</div>
</div>
</div>
CSS:
.grid-block {
position: absolute;
width: 380px; height: 250px;
margin-left: 25px; margin-right: 25px;
margin-bottom: 50px;
font-family: 'times';
text-align: center;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
cursor: pointer;
display: table; vertical-align: middle;
}
.grid-block-text-hover-wrap {
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.75);
display: table;
vertical-align: middle;
}
.grid-block-text-hover-wrap .grid-block-text-wrap {
color: white;
}
.grid-block .grid-block-text-wrap {
display: table-cell; vertical-align: middle;
width: 100%; height: 100%;
}
.grid-block-text-wrap {
margin-left: 50px; margin-right: 50px;
}
.grid-block-text-title {
position: relative;
margin-top: 7px;
margin-bottom: 20px;
text-transform: uppercase;
}
.grid-block-text-hover-wrap .grid-block-text-title {
font-size: 16px;
line-height: 25px;
letter-spacing: 2px !important;
}
.grid-block-text-subtitle {
position: relative;
font-size: 12px;
letter-spacing: 2px !important;
text-transform: uppercase;
}
如您所見, .grid-block-text-hover-wrap
在懸停時會淡入,但是由於某些原因,在Firefox中,該div不能正確顯示,也無法將文本居中對齊。 我不知道為什么這似乎正在發生。 任何建議將不勝感激!
嘗試更換height: 100%; width: 100%
height: 100%; width: 100%
, width: 380px; height: 250px
width: 380px; height: 250px
。 看看新的小提琴: http : //jsfiddle.net/WHCNF/1/
更改您當前的課程
.grid-block-text-hover-wrap {
position: relative;
width: 100%; height: 100%;
background: rgba(0,0,0,0.75);
display: table;
vertical-align: middle; }
我希望它也可以在Firefox中為您工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.