Html 对齐范围滑块和标签

我试图垂直对齐html范围幻灯片和显示当前值的标签。 问题是，如果标签字体大小大于100%，它将不对齐。尝试了“标签”和“输出”

HTML

Fiddle

我会用它代替

表格单元格

：

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

---

他也可以使用其他值来调整内容属性，但总体来说，这个解决方案是一个理想的结果。

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}
.lblFloat
{
float:right;
font-size: 200%;
text-align: center;
}

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