同样的css在firefox中不起作用，但在chrome中是完美的

Question

在chrome中，图像在中间完美对齐但在firefox中似乎无法正常工作，图像似乎由于某种原因而粘在顶部  我找不到确切的问题。我为chrome 和firefox

附加了两张图片

<div class="img-wrap">
      <a acttype="visitstore" class="displayinlineblock action-btn deal-prod-img">
        <span class="" style="display: inline-block;vertical-align: middle;height: 100%;"></span>
        <img src="https://d1oj69lo91yuwm.cloudfront.net/store/thumb1/bigbasket.png" alt="naturesbasket">
      </a>
    </div>

的CSS

.img-wrap {
    height: 145px;
    min-width: 138px;
    vertical-align: middle;
    padding: 10px;
    margin-bottom: 15px;
}
.product-wrapper .img-wrap>a {
    float: left !important;
    height: 100% !important;
    text-align: center !important;
    width: 100% !important;
}
.deal-prod-img {
    display: inline-table !important;
    vertical-align: middle;
}
.img-wrap>a>img {
    max-height: 133px;
    width: auto;
}

Answer 1

您是否只想将图像垂直居中放在容器内？

中心事物永远不会像它们应该那样直观，所以如果我是你，我会给this handy guide to centering things添加书签，并在需要的时候随时查阅。

无论如何，它提到了一些选项，您可以通过浏览器获得更一致的结果。

您可以简单地在每一侧为图像提供填充。

或者，如果您将图像作为容器内的唯一内容，则可以将行高设置为与实际高度相同，并且图像将居中。

如果它比这更复杂，那么请查看该链接。你肯定会在那里找到有用的东西，但我能够使用你提供的源代码使用line-height来使图像居中。