Question

在卡片上，我有一个＆＃34;加号图标＆＃34;当用户盘旋时出现。但是＆＃34;加＆＃34;图标垂直居中于firefox（在我的Firefox上测试：44.0.2），但它无法在Chrome上运行（在我的chrome 48.0上测试过）。

如果你打开Jsfiddle并在firefox上打开它，然后将卡片悬停在卡片上，你会看到＆＃34; Plus＆＃34;图标在chrome上没有垂直对齐。我无法理解为什么。

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 1

我认为，由于相对定位且父级没有固定高度，链接上的top: 50%无效。

尝试

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

垂直对齐在Firefox上工作但不在Chrome上

1 个答案: