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

Question

我正在构建一个范围/ slider 来将用户结果与平均值进行比较。我真的很难让 slider 下的文本按照我想要的方式运行:

我已经设法让箭头、百分比和文本像前两张图片一样正确居中，但是当我将位置设置得太高或太低时，文本会溢出到页面的另一个区域。我想要的是像最后两张图片那样的行为，其中文本保持在其范围内。

我已经尝试了两种不同的方法但最终结果相同，但现在我卡住了:

<div style="`margin-left:${areaScore}%;margin-right:${100 - areaScore}%;text-align:center`">
    <div style="transform: translateX(-50%)" >^</div>
    <div style="transform: translateX(-50%); width: 50px">
        {{ areaScore }}%
    </div>
    <div style="transform: translateX(-50%); width: 150px">
          The average in your area
    </div>
</div>

<div style="position: relative; text-align: center">
    <div :style="`position:absolute;left:${areaScore}%`">^</div>
    <div :style="`position:absolute;left:${areaScore}%;top:10px`">
        {{ areaScore }}%
    </div>
    <div :style="`position:absolute;left:${areaScore}%;top:24px`">
        The average in your area
    </div>
</div>

我可能应该提到我使用的是 Vue，因此有 mustache 、样式前的冒号和 areaScore 的参数化，但我不认为它与我的问题特别相关。

我确信这个问题是可以解决的，但我已经浪费了很多时间来寻找解决方案，我希望有人能为我指明正确的方向。

Answer 1

这需要在 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 元素中。原因是 div 默认情况下会延伸整个宽度(因为 display: block)。 Inside 需要是一个我们可以读取其宽度和我们可以操纵其位置的元素。

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

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

最后一 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。 100是基于滑动区域的宽度100px。

如果我们想在拖动时更新位置，则有必要更新 input 事件，如 https://stackoverflow.com/a/19067260/4874075 中所见。 .

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