Bereich Schieberegler und Label

Question

Ich versuche, vertikal HTML-Bereich Folie und eine Bezeichnung aktuellen Wert anzuzeigen. Das Problem ist, wenn die Schriftgröße der Etiketten größer als 100% ist, ist sie nicht ausgerichtet. Versucht sowohl 'label' und '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/

Answer 1

I flexbox statt table-cell verwenden würde:

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/