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

Question

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

HTML代码图像

CSS代码图像

null

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

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

null

我想要实现的是使输入居中，同时使单词向右和向左尽可能靠近滑块。问题是，用这个代码，如果我改变单词的长度，中心就移动了，这是我不想要的。我想保持中心原样，同时能够改变文字。所以我今天的问题是，我要对代码做什么修改，以使它按照我想要的方式运行？

Answer 1

使用flex可以更容易地实现这一点。使用flex而不是text-center将主要内容居中，并在输入和标签周围添加一个额外的包装，将其内容与flex一起居中。

我添加了一个红色的背景，这样你就可以很容易地看到它的全部居中，就像预期的那样

null

.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>