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> 

、最初のラベルが左側に、範囲要素の最上部に表示され、第二の標識もに見られるように、左側ではなく範囲の下に表示されます以下の画像：

[中央にない]：！（http://imgur.com/a/L12DZ）

中心としています唯一のものは範囲です。私もフォームを使用しようとしましたが、ラベルが画面上に表示されている間に、フルスクリーンでラベルを表示していましたが、モバイルでウェブサイトをチェックしたとき、ラベルは写真のように再配置されませんでした。これはウェブで初めての実験です。どうもありがとう。

注：私の問題に関連しているが、私はブートストラップを使用しているのかどうかはわかりません。

編集：（ブートストラップファイルから）CSSを追加

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>