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:

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

Any way to do this?

score 0 · Accepted Answer · answered Jan 13 '19 at 06:56

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>

score 0 · Answer 2 · answered Jan 13 '19 at 07:05

So when it comes to vertically aligning anything I'm a big fan of Flexbox, I added a bit of margin and reorganized the HTML a bit for it to work and just make it look a tad better. I also added a .Container class so that you can see how it works a bit more, check this out for more info: Flexbox

.Container {
  display: flex;
  margin: 24px 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.icon {
  margin-right: 6px;
}

.inputSet {
  margin: 12px 0;
  display: flex;
  flex-flow: row;
  align-items: center;
}

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

How to center this element vertically?

2 Answers2