Mathieu Mathieu - 7 months ago 30
HTML Question

Vertical align working on firefox but not on Chrome

On a card, I have a "plus icon" appear when the user hovers. But the "plus" icon is vertically centered on firefox (tested on my firefox: 44.0.2) but it's not working on Chrome (tested on my chrome 48.0).

If you open the Jsfiddle and open it on firefox then chrome and hover the card you'll see that the "Plus" icon is not vertically aligned on chrome. I can't understand why.

Jsfiddle demo

HTML

<div class="center jumbotron">

<div id="deal-zone">
<ul class="cards-list">

<li class="card 353">

<div class="card-content">

<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get

</div>

<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">

<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">

<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>

<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>



</figcaption>
</figure>
</div>

</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details i want
</div>

</div>


</li>
<!-- cards in the stream of deal -->


</ul>


</div>

</div>


CSS

.info-overlay {
display: none;
z-index: 999;
position: absolute;
height: 100%;
width: 100%;
background-color: grey;
}

.close-overlay {
float: right;
padding: 5px;
}

#deal-zone {
margin-top: 20px;
}

#deal-zone ul {
padding: 0;
}

.cards-list {
list-style: none;
display: block;
height: auto;
}

.card {
width: 47%;
display: inline-block;
margin: 0 1% 21px 1%;
}

.card-content {
background: #fff;
position: relative;
}

.card-image {
vertical-align: top;
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}

.card-image img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: red;
}

.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}

.card-short-info {
width: 100%;
height: 30%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom: 0;
display: none;
}

.moreInfo {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: right;
font-size: 16px;
line-height: normal;
color: #464650;
}

.short-info-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}

.card-short-info a.dateSales {
color: #464650;
}

.card-long-info {
width: 100%;
height: 100%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom: 0;
display: none;
}


Javascript

$(".card-image").hoverIntent({
sensitivity: 100, //sensitivity threshold (must be 1 or higher)
interval: 100, //milliseconds for onMouseOver polling interval
timeout: 100, //milliseconds delay before onMouseOut
over: function() {
$('.card-short-info', this).slideToggle(100);
},
out: function() {
$('.card-short-info', this).slideToggle(300);


}
});

$(".close-overlay").click(function(e) {
e.preventDefault();
$(this).closest('.card-content').find(".info-overlay").hide();
});

$(".plusbutton").click(function(e) {
e.preventDefault();
$(this).closest('.card-content').find(".info-overlay").show();
});

Answer

I think, your top: 50% on the link is not working due to relative positioning and the parent not having a fixed height.

Try

.moreInfo {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 font-size: 16px;
 line-height: normal;
 color: #464650;
}