How to center vertical alignment of text next to range input slider

Question

I have a range input slider with text either side that I would like to align differently.

Ideally I don't want to change the text size if I can help it, but would consider it as a last resort (I have tried already tried it and it didn't work).

Also, I have already tried the suggestions as outlined in this question: CSS: How to align vertically a "label" and "input" inside a "div"?

Here is my html:

  <div>
    <span class="slider-left"><span id="slider-reset" class="slider-reset">Label</span></span><span class="slider-center"><input id="slider" class="slider" type="range" min="0" max="100" value="100"></span><span id="slideroutput" class="slider-output slider-right"></span>
  </div>

and my css:

.slider-left {
width: 75px;
text-align: right;
margin-right: 10px;
float: left;
}

.slider-center, .slider {
width: 170px;
}

.slider-right {
width: 50px;
text-align: left;
margin-left: 10px;
float: right;
}

and this is how it looks:

As you can see, the text feels like it's a few pixels too high up compared to the slider, the centre of which appears to be aligned to the bottom of the text. I would like the horizontal centre of the slider bar to be aligned with the horizontal centre of the text.

Thanks in advance!

Hi @Josef no problems - I've just posted an answer that should resolve the vertical alignment issue regardless of the font being used. Does that help? — Dacre Denny, Feb 16 '19 at 22:29

score 4 · Accepted Answer · answered Feb 16 '19 at 22:26

Consider using flexbox to resolve the vertical alignment issue as outlined below:

.slider {
  /* Use flexbox for slider wrapper element */
  display:flex;
  /* Direct alignment of content along horizontal axis */
  flex-direction:row;
  /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
  align-items:center;
}

.slider-label {
  width:75px; 
}

.slider-input {
  /* Causes the input element to horizontally stretch to fill in available horizontal space */
  flex:1;
}

.slider-value {
  width: 100px;
}

<div class="slider">
  <span class="slider-label">Label</span>
  <input id="slider" class="slider-input" type="range" min="0" max="100" value="100" />
  <span id="slideroutput" class="slider-value">100</span>
</div>

To get a better feel for how flexbox works, you might find these interactive playgrounds helpful:

How to center vertical alignment of text next to range input slider

1 Answers1