我是这个平台的新用户，英语不是我的主要语言，所以请原谅我的错误。我将首先附加代码。
HTML代码图像
CSS代码图像
null
.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>null
我想要实现的是使输入居中，同时使单词向右和向左尽可能靠近滑块。问题是，用这个代码，如果我改变单词的长度，中心就移动了，这是我不想要的。我想保持中心原样，同时能够改变文字。所以我今天的问题是，我要对代码做什么修改，以使它按照我想要的方式运行？
使用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>