Javascript 是否同时填充宽度和垂直中心？

编辑：我想要一个RangeSlaider和它的标签在同一行上，并且彼此垂直居中。另外，RangeSlaider是一个灵活的宽度，所以我希望它能够填充可用空间

如何使浮动垂直居中

或者，如何获得内联块以填充宽度

我把这两个问题都塞进了一个问题，因为我找到的关于浮动居中的答案涉及使用内联块，而关于填充宽度的答案涉及浮动。我需要把两者结合起来

HTML:

带内联的CSS：

---

如果有人知道在纯CSS中实现这一点的简单方法，请告诉我。 我使用jQuery实现以下功能：

---

否决票和接近票应该有一个解释性的评论，不是吗？不清楚你想要实现什么。使标签和滑块处于同一水平面上？？处于同一水平面上，并垂直居中。另外，RangeSlaider是一个灵活的宽度，所以我希望它能够填充可用空间。

<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>

#table {
    /*overflow-x: hidden;*/
}
#table > label {
    float: left;
    vertical-align: middle;
    margin: 0;
}
.ui-rangeslider {
    overflow-x: hidden;
    vertical-align: middle;
}

#table > label {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}
.ui-rangeslider {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

$(function() {
    var $rangeSliderHeight = $(".ui-rangeslider-sliders").height();
    var $label = $("#column1");
    var moveDown = ($rangeSliderHeight / 2) - ($label.height() / 2);
    console.log(moveDown)
    $label.css({
        position: "relative",
        top: moveDown
    });
})