html - 仪表条可以升高 X 像素吗？

Question

我想将仪表条 X 像素提高到以文本高度为中心（在条的两侧）。我只想提高仪表条，并将文本保持在原位。

我试过 padding-bottom 但它提高了整条线。

非常感谢，

meter::-webkit-meter-bar {
height: 10px;
}

TEXT <meter value="0.5"></meter> TEXT

Answer 1

试一试！

meter::-webkit-meter-bar {
height: 10px;
margin-top: 2px; /* (16px - 10px) / 2 */
}

#meter {
  font-size: 16px;
  line-height: 16px;
}

<div id="meter">
TEXT <meter value="0.5"></meter> TEXT
</div>

如果您希望字体更小，您可以将其更新为以下内容：

meter::-webkit-meter-bar {
height: 10px;
margin-top: 1px; /* (12px - 10px) / 2 */
}

#meter {
  font-size: 12px;
  line-height: 12px;
}

<div id="meter">
TEXT <meter value="0.5"></meter> TEXT
</div>