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

Question

I have 3 spans inside a single div. Chrome shows all the three spans vertically aligned at the center like this:

But this is what happens in Firefox:

Below is the code for the div which contains the following: quantity label, - button, text field & + button:

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

And below is the only CSS which is applicable for it:

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

Is there anything with which the problem can be fixed?

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.

If you set each inline-block element to vertical-align: middle then all of those elements will be vertically centered in reference to the parent element.

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