垂直对齐 div 内的多个跨度 - 不同浏览器中的不同行为

Question

我在一个 div 中有 3 个跨度。 Chrome 显示在中心垂直对齐的所有三个跨度，如下所示：

但这就是在 Firefox 中发生的事情：

以下是包含以下内容的 div 代码：数量标签、- 按钮、文本字段和 + 按钮：

<div class="form-item form-type-textfield form-item-quantity">
    <label for="edit-quantity">Quantity </label>
    <span class="commerce-quantity-plusminus-link commerce-quantity-plusminus-link-decrease commerce-quantity-plusminus-link-disabled"><a href="/myWebsite/node/12" class="button" onclick="Drupal.commerce_extra_quantity_quantity('#edit-quantity', -1); return false;">-</a></span>
    <span class="inline-block-text-box"><input type="text" id="edit-quantity" name="quantity" value="1" size="5" maxlength="128" class="form-text"></span>
    <span class="commerce-quantity-plusminus-link commerce-quantity-plusminus-link-increase commerce-quantity-plusminus-link-disabled"><a href="/myWebsite/node/12" class="button" onclick="Drupal.commerce_extra_quantity_quantity('#edit-quantity', 1); return false;">+</a></span>
</div>

以下是唯一适用的 CSS：

.inline-block-text-box
{
    /* Raj: To show increment and decrement buttons in same line along with the text field */
    display: inline-block;
}

有什么可以解决问题的吗？

Answer 1

vertical-align: middle

vertical-align CSS 属性指定内联或表格单元框的垂直对齐方式。

• 中
  将元素的中间与基线加上父元素 x 高度的一半对齐。

如果您将每个 inline-block 元素设置为 vertical-align: middle，那么所有这些元素都将相对于 父 元素垂直居中。

.inline-block-text-box {
    display: inline-block;
    vertical-align: middle;
}