CODEWITHSUNDEEP
htmlcssslider
sergeyvin
sergeyvin

Reputation: 23

Align range slider and label

I am trying to align vertically html range slide and a label displaying current value. The problem is if label font size is larger than 100% it is not aligned. Tried both 'label' and 'output'

HTML

<div>
<output id="myoutput" class="lblFloat">Output: 50</output>
<label for="myslider" id="mylabel" class="lblFloat">Label: 50</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;
}
.lblFloat
{
float:right;
font-size: 200%;
text-align: center;
}

Fiddle http://jsfiddle.net/sergeyvin/1v19t4no/4/

Upvotes: 1

Views: 3359

Answers (1)

Blazemonger
Blazemonger

Reputation: 92953

I would use flexbox instead of table-cell:

div {
    display: flex;
    flex-flow: row-reverse; /* or 'row' and change the order of your html elements */
    align-items: center;
    justify-content: flex-end; /* or 'flex-start' and change the order of your html elements */
    height: 50px;
    border: 1px solid red;
}

http://jsfiddle.net/tupupawg/

Upvotes: 2

Related Questions