同时填充宽度和垂直中心

fill width and vertically center at the same time?

本文关键字：垂直 填充      更新时间：2023-09-26

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

如何使浮子垂直居中？

http://jsfiddle.net/v2jaY/8/

或者，如何获得一个内联块来填充宽度？

http://jsfiddle.net/v2jaY/7/

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

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%;
}

如果有人知道在纯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
    });
})
相关文章：