How to center this element vertically?

Question

.inputSet {
  display: inline-block;
}

input {
  display: block;
}

<div>
  <span>δ:</span>
  <div class="inputSet">
    <input type="number">
    <input type="range">
  </div>
</div>

As you can see, this δ is at the bottom, which looks ugly. Instead, the δ should be vertically centered. (moved up a bit).

I've read this guide: https://css-tricks.com/centering-css-complete-guide/ and can't find a solution. δ clearly is an inline-* element but all methods to center such an element require knowing the height of the enclosing div:

1. I can't do span {padding-top: 30px; padding-bottom: 30px;} because I don't know the rendered height of the enclosing div.
2. I can't do span {height: 100px; line-height: 100px; white-space: nowrap;} for the same reason.

Any way to do this?

Answer 1

You can use vertical-align: middle for .inputSet

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

input {
  display: block;
}

<div>
  <span>δ:</span>
  <div class="inputSet">
    <input type="number">
    <input type="range">
  </div>
</div>