居中一个范围与其在同一级别的标签在一个div

我想中心一个范围与它的标签在div的每一边。问题是，它不工作。居中一个范围与其在同一级别的标签在一个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>

随着我现在的代码，所述第一标签出现在范围元件的顶部上，在左侧，并且所述第二标签还出现在左侧，但范围下，如在可见下面的图片：

[不集中]：（http://imgur.com/a/L12DZ）

多数民众赞成中心的唯一事情是在范围内。我也尝试过使用表单，但是当标签出现在全屏幕的两侧（我想要的东西）上时，当我在移动设备上查看网站时，标签再次出现位置，就像图片中一样。这是我第一次尝试使用网络。非常感谢。

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

编辑：添加CSS（从引导文件）

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

来源

2017-07-01 Jolene K.

你试图浮动分辩？ – JSmith

我试图在整个div上使用它（同一个里面的其他人开始表现奇怪），然后我将它应用到标签max1，结果是这个http://imgur.com/a/lz3MT –

这里是一个[JSFiddle链接]（https://jsfiddle.net/podpsehn/）我粘贴你的代码，一切看起来都很好。 – JSmith

您正在寻找这样的事情？

* { 
 
    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>

来源

2017-07-01 21:30:46

居中一个范围与其在同一级别的标签在一个div

回答

相关问题