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

Question

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

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>

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

Answer 1

使用 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>

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

HTML-I'm trying to centre an input slider while keeping the text around it normal

html

css

input

slider