将垂直范围滑块与其末端的按钮对齐

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将垂直范围滑块与其末端的按钮对齐相关的知识,希望对你有一定的参考价值。

我正在尝试创建一个带有垂直范围滑块和两端的两个按钮的缩放滑块,但无法将滑块与其末端的按钮水平对齐。

#zoomcontrol {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 500px;
  background-color: yellow;
}

#zoomrange,
#minus,
#plus {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

#zoomrange {
  height: 150px;
  position: relative;
  top: 30px;
  -webkit-appearance: slider-vertical;
}

#minus {
  top: 180px;
}

#minus,
#plus {
  background: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 5px;
  text-align: center;
  line-height: 25px;
}
<div id="zoomcontrol">
  <div id="plus">+</div>
  <input type="range" min="1" max="100" value="50" class="slider" id="zoomrange" orient="vertical">
  <div id="minus">-</div>
</div>

(另外,有人可以告诉我为什么减号按钮比加号按钮更远离滑块?)

答案

您需要补偿按钮的宽度及其边距,加上#zoomrange本身的宽度。

#minus, #plus {
  left: calc(50% - 16px);
  transform: none;
}
另一答案

也许使用flexbox可以帮助一点绝对定位;

#zoomcontrol {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 500px;
  background-color: yellow;
}

#zoomrange,
#minus,
#plus {}

#zoomrange {
  height: 150px;
  -webkit-appearance: slider-vertical;
}

#minus,
#plus {
  background: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 5px;
  text-align: center;
  line-height: 25px;
}
<div id="zoomcontrol">
  <div id="plus">+</div>
  <input type="range" min="1" max="100" value="50" class="slider" id="zoomrange" orient="vertical">
  <div id="minus">-</div>
</div>

以上是关于将垂直范围滑块与其末端的按钮对齐的主要内容,如果未能解决你的问题,请参考以下文章

垂直对齐一个“挂掉”与其同伴水平对齐的div的元素

Bootstrap:如何将按钮组居中对齐(垂直)

如何在Chrome中的文件输入上垂直对齐文件名

如何将CheckBox与其内容对齐?

垂直对齐div按钮内的文本?

MKMapView 与其区域属性未对齐