Html 如何在不溢出的情况下将元素与其父元素集中对齐

这需要使用JavaScript进行一些计算.我不知道vue，所以我将使用纯JS给出我的答案.我已经整理了一个移动文本的示例.让我们先看看HTML:

<div class="container">
  <input class="slider" type="range" min="0" max="100">
  <div>
    <span class="percent">50%</span>
  </div>
  <div>
    <span class="text">Some long text</span>
  </div>
</div>

我把文本和百分比(就像你的分数)放在div个元素中的span个元素中.原因是默认情况下，a div会延伸到整个宽度上(因为display: block).内部需要有一个元素，其宽度我们可以读取，位置我们可以操纵.

现在无法定位span，因为它显示为inline.所以，我在上面使用display: inline-block:

.percent, .text {
  display: inline-block;
}

最后一部分是JavaScript计算:

const slider = document.querySelector('.slider');
const percent = document.querySelector('.percent');
const text = document.querySelector('.text');

slider.value = 50;
setPercent(50);
positionElement(text, 50);

slider.addEventListener("input", (event) => {
  setPercent(event.target.value);
  positionElement(text, event.target.value);
});

function setPercent(value) {
  percent.textContent = value + '%';
  positionElement(percent, value);
}
  
function positionElement(element, value) {
  const width = element.offsetWidth;
  const xPosition = Math.min(Math.max(value - (width / 2), 0), 100 - width);
  element.style.transform = `translateX(${xPosition}px)`;
}

按键使用translateX移动span个元素，就像您已经做的那样.使用Math.min和Math.max，我们可以根据元素的宽度为该移动设置边界.重要提示:首先设置新文本，然后获取宽度并更改translateX.translateX基于滑动区域的translateXpx宽度.

如果要在拖动时更新位置，则需要更新https://stackoverflow.com/a/19067260/4874075中的input个事件.

我已经把这个例子放在代码笔上:https://codepen.io/andreas-tennert/pen/YzeMoee