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

Question

我在单个 div 中有 3 个 span。 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

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Middle
Aligns the middle of the element with the baseline plus half the x-height of the parent.

如果您将每个 inline-block 元素设置为 vertical-align: middle，那么所有这些元素将参考 parent 元素垂直居中。

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

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

Vertically align multiple spans inside a div - Different behavior in different browsers

html

css

drupal-7

vertical-align: middle