html - 将范围及其标签置于 div 中同一级别的中心

Question

我试图在 div 内的每一侧将其标签居中。问题是，它不起作用。

<div style="margin:0 auto;">
    <label for="min1" style="font-weight: normal; font-size: 15px;">0%</label>
    <input id="price" type="range" min="0" max="100" value="0" style="width: 50%; margin-left: auto; margin-right: auto;">
    <label for="max1" style="font-weight: normal; font-size: 15px;">100%</label>
</div>

使用我现在的代码，第一个标 checkout 现在范围元素顶部的左侧，第二个标签也出现在左侧但在范围下方，如下图所示:

![不居中]: ( http://imgur.com/a/L12DZ )

唯一居中的是范围。我也尝试过使用表格，但是当标 checkout 现在全屏的侧面(我想要的东西)时，当我在移动设备上查看网站时，标签又错位了，就像图片中一样。这是我第一次尝试使用 web.多谢。

注意:不确定它是否与我的问题相关，但我正在使用 Bootstrap。

编辑:添加 CSS(来自 Bootstrap 文件)

input[type=range]{display:block;width:50%}
label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}

Answer 1

你在找这样的东西吗？

* {
  border: 0;
  margin: 0;
  padding: 0;
}

#container {
  min-width: 250px;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}

#slider {
  width: 250px;
}

#label2 {
  margin-left: 188px;
}

<div id="container">
  <span id="label1">0%</span>
  <span id="label2">100%</span>
  <br>
  <input id="slider" type="range" value="0">
</div>