HTML-我正在尝试将输入滑块居中，同时保持其周围的文本正常

如何解决HTML-我正在尝试将输入滑块居中，同时保持其周围的文本正常

我是这个平台的新用户，英语不是我的主要语言，所以请原谅我的错误。我先附上代码。

HTML code image

CSS code image

.container_beta
{
  text-align: center;
}
.container_beta input
{
  width:500px;
}

<div class="container_beta">
          <span>Easy</span>
          <input type="range" name="difficulty" id="difficulty" min="0" max="5" step="1">
          <span>Hard</span>
      </div>

我想要实现的是将输入居中，同时保持左右单词尽可能靠近滑块。问题是使用此代码，如果我更改单词的长度，中心会移动，这是我不想要的。我想保持中心不变，同时能够改变文字。 所以我今天的问题是我对代码进行了哪些更改以使其按照我想要的方式运行？

解决方法

使用 flex 使这更容易。使用 flex 而不是 text-center 将主要内容居中，并在输入和标签周围添加额外的包装器，使其内容也以 flex 居中。

我添加了一个红色背景，以便您可以轻松地看到所有内容都按预期居中

.container_beta {
  display: flex;
  justify-content: center;
  background-color: red;
}
.container_inner {
  display: flex;
  justify-content: center;
}
.container_beta input {
  width:500px;
  margin: 0;
}

<div class="container_beta">
    <div class="container_inner">
        <span>Easy</span> <input id="difficulty" max="5" min="0" name="difficulty" step="1" type="range"> <span>Hard</span>
    </div>
</div>

替代方案

.container_beta {
  display: flex;
  justify-content: center;
  background-color: red;
  padding: 20px
}
.labels {
  display:flex;
  width: 100%;
  justify-content: space-between;
}
.container_inner {
  display: flex;
  justify-content: center;
}
.container_beta input {
  width:500px;
  margin: 0;
}

<div class="container_beta">
  <div>
    <div class="labels">
      <span>Easier Label</span>
      <span>Hard</span>
    </div>
    <div class="container_inner">
        <input id="difficulty" max="5" min="0" name="difficulty" step="1" type="range"> 
    </div>
  </div>
</div>