时间戳

首页 > 解决方案 > 如何在范围输入滑块旁边居中文本的垂直对齐

html - 如何在范围输入滑块旁边居中文本的垂直对齐

问题描述

我有一个范围输入滑块，两边都有我想以不同方式对齐的文本。

理想情况下，如果我能提供帮助，我不想更改文本大小，但会将其视为最后的手段（我已经尝试过，但没有成功）。

另外，我已经尝试过这个问题中概述的建议： CSS：如何在“div”中垂直对齐“标签”和“输入”？

这是我的html：

  <div>
    <span class="slider-left"><span id="slider-reset" class="slider-reset">Label</span></span><span class="slider-center"><input id="slider" class="slider" type="range" min="0" max="100" value="100"></span><span id="slideroutput" class="slider-output slider-right"></span>
  </div>

和我的CSS：

.slider-left {
width: 75px;
text-align: right;
margin-right: 10px;
float: left;
}

.slider-center, .slider {
width: 170px;
}

.slider-right {
width: 50px;
text-align: left;
margin-left: 10px;
float: right;
}

这就是它的外观：

带有需要垂直对齐的文本的滑块屏幕截图

如您所见，与滑块相比，文本感觉高了几个像素，滑块的中心似乎与文本底部对齐。我希望滑块的水平中心与文本的水平中心对齐。

提前致谢！

标签： htmlcss

解决方案

考虑使用 flexbox来解决垂直对齐问题，如下所述：

.slider {
  /* Use flexbox for slider wrapper element */
  display:flex;
  /* Direct alignment of content along horizontal axis */
  flex-direction:row;
  /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
  align-items:center;
}

.slider-label {
  width:75px; 
}

.slider-input {
  /* Causes the input element to horizontally stretch to fill in available horizontal space */
  flex:1;
}

.slider-value {
  width: 100px;
}
<div class="slider">
  <span class="slider-label">Label</span>
  <input id="slider" class="slider-input" type="range" min="0" max="100" value="100" />
  <span id="slideroutput" class="slider-value">100</span>
</div>

为了更好地了解 flexbox 的工作原理，您可能会发现这些交互式 Playground 很有帮助：

推荐阅读