How to vertically center a label on a range input

Question

This seems like it would be so simple but its giving me quite a bit of trouble. I've tried using this method already and it doesn't seem to work, as you can see here: http://jsfiddle.net/ENuLz/. Floating the label and the input seems to be a step in the right direction but I still can't quite figure it out.

jsfiddle code:

<div>
    <label for="myslider">Slider:</label>
    <input type="range" id="myslider" min="1" max="100" />
</div>

css:

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

Solution: http://jsfiddle.net/ENuLz/17/

^This seems to work in the latest versions of chrome, firefox, and ie.

Possible duplicate of [CSS: How to align vertically a "label" and "input" inside a "div"?](https://stackoverflow.com/questions/4466596/css-how-to-align-vertically-a-label-and-input-inside-a-div) — domsson, Oct 24 '19 at 14:50

score 6 · Accepted Answer · answered Feb 14 '14 at 01:03

6

Here is the code to center the elements vertically

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

div label
{
    vertical-align:middle;

}

#myslider
{
    vertical-align:middle;

}

jsFiddle: http://jsfiddle.net/ENuLz/16/

answered Feb 14 '14 at 01:03

Toan Nguyen

11,263
5
43
59

This looks great in chrome and firefox but not great in ie. Can't win em all though. – Rob Allsopp Feb 14 '14 at 01:07
This got me most of the way to the solution I just added to my original question. Thanks! – Rob Allsopp Feb 14 '14 at 01:27
@RobbyAllsopp No worries – Toan Nguyen Feb 14 '14 at 01:29

domsson · Answer 2 · 2021-06-09T09:40:03.440

With flexbox, we now have another solution available. All we need is align-items:

div {
  /* Use flexbox and center items vertically */
  display: flex;
  align-items: center;
  /* The following aren't needed, they just help us to see the effect */
  height: 3rem;
  padding: 1rem;
  border: 1px dotted #555;
}

<div>
  <label for="myslider">Slider:</label>
  <input id="myslider" type="range" min="1" max="100">
</div>

score 1 · Answer 3 · answered Feb 14 '14 at 00:57

1

Here is the vertical alignment:

In HTML:

<div>
    <label for="myslider">Slider:</label>
    <input type="range" min="1" max="100" />
</div>

In CSS:

 div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}
.lblFloat
{
    float:left;
}

http://jsfiddle.net/ENuLz/4/

answered Feb 14 '14 at 00:57

Lexicon

473
1
3
15

Yeah thats what I got when I floated them but it still doesn't really look centered to me. If you add a border to the label you can see its not really centered in the div: jsfiddle.net/ENuLz/14/, nor is it centered if you remove the float: jsfiddle.net/ENuLz/15/ – Rob Allsopp Feb 14 '14 at 01:01

score -1 · Answer 4 · answered Feb 14 '14 at 00:53

-1

I added this css to the label contained within your div:

div label {
    display:block;
    width:100%;
    text-align:center;
}

It will center the label above the slider, which I believe is what you're asking for.

FIDDLE

answered Feb 14 '14 at 00:53

steinmas

398
3
9

Sorry my title wasn't clear. I want to vertically center them, not horizontally above or below. – Rob Allsopp Feb 14 '14 at 00:55

score -1 · Answer 5 · answered Feb 14 '14 at 00:54

-1

Add

label {    
    display: block;
}

answered Feb 14 '14 at 00:54

ioseph

1,887
20
25

Sorry my title wasn't clear. I want to vertically center them, not horizontally above or below. – Rob Allsopp Feb 14 '14 at 00:56
You can add a margin-top to both elements, I'd recommend using developer tools so you can quickly adjust until pixel perfect. – ioseph Feb 14 '14 at 01:40

How to vertically center a label on a range input

5 Answers5