Question

编辑：我希望一个rangelider及其标签位于同一行，并相对于彼此垂直居中。此外，rangelider是一个灵活的宽度，所以我希望它填补可用的空间。

如何垂直居中浮动？

或者，如何让内联块填充宽度？

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

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：

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

带内联的CSS：

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

Answer 1

如果有人知道在纯CSS中执行此操作的简单方法，请赐教。我用jQuery来实现这些： http://jsfiddle.net/MHQ6A/

$(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
    });
})

填充宽度和垂直居中同时？

1 个答案: