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

Question

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

HTML代码图像

CSS代码图像

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

我试图实现的是将输入居中，同时使单词尽可能靠近滑块。问题是，对于这个代码，如果我改变单词的长度，中心就会移动，这是我不希望的。我想保持中心不变，同时能够改变单词。所以我今天的问题是，我对代码做了哪些更改，以便它按照我想要的方式运行？

Answer 1

使用flex使这更容易。使用flex而不是文本中心来居中主要内容，并在输入和标签周围添加一个额外的包装，以使其内容也使用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>