UPDATE: Seeking advice on aligning a rangeslider and its label vertically within the same row. The goal is to have them centered with respect to each other while ensuring the rangeslider takes up all available space.
How can I vertically center a floating element?
Link for reference: http://jsfiddle.net/v2jaY/8/
Alternatively, what's the best way to make an inline block fill the entire width?
Link for reference: http://jsfiddle.net/v2jaY/7/
I've combined these questions because solutions I've come across involve using inline-block for centering and float for filling width. I'm looking for a way to combine both approaches in this case.
HTML:
<div id="table">
<div data-role="rangeslider" id="column2">
<label for="slider-bedroom-min" id="column1">Bedrooms:</label>
<input name="slider-bedroom-min" id="slider-bedroom-min" min="1" max="4" value="1" type="range" />
<label for="slider-bedroom-max">Bedrooms:</label>
<input name="slider-bedroom-max" id="slider-bedroom-max" min="1" max="4" value="2" type="range" />
</div>
</div>
CSS with float:
#table {
/*overflow-x: hidden;*/
}
#table > label {
float: left;
vertical-align: middle;
margin: 0;
}
.ui-rangeslider {
overflow-x: hidden;
vertical-align: middle;
}
CSS with inline:
#table > label {
display: inline-block;
vertical-align: middle;
margin: 0;
}
.ui-rangeslider {
display: inline-block;
vertical-align: middle;
width: 50%;
}