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

Question

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

但这是Firefox中发生的事情：

以下是div的代码，其中包含以下内容：数量标签， - 按钮，文本字段＆amp; +按钮：

<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;
}