Question

我正在尝试垂直对齐html范围幻灯片和显示当前值的标签。问题是如果标签字体大小大于100％它没有对齐。试过'标签'和'输出'

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

小提琴http://jsfiddle.net/sergeyvin/1v19t4no/4/

Answer 1

我会使用flexbox代替table-cell：

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/

对齐范围滑块和标签

1 个答案: