div内のinput-groupを中心にするには？

Question

.input-groupを<div>の内側に配置したいと考えています。クラスcenter-blockを使用すると、<span>は全幅をとり、その下の入力フィールドを押し下げます。私は一緒にそれらを中心にしたい。

<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <div class="input-group input-group-lg inv-amount-block"> 
     <span class="input-group-addon" id="inv-rs">Rs</span> 
     <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1"> 
    </div> 
</div> 

私はそれらをデフォルトでのように中央に配置したいと思っています。 - display: blockとdisplay: tableの違いがあることである：ここでは

は、編集した.center-block

ためCSSに表示プロパティを変更fiddle

Answer 1

です。 display: block - 利用可能な領域の100％に拡張されますが、display: table - はその内容と同じくらいの幅になります。

ので、後者の場合には、あなたのspanとinput fieldはその内容と同じ幅になると指定されている全体40%幅を占有されることはありません。

.center-block { 
 
    display: table; /* Instead of display:block */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

   <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 "> 
 

 
       <div class="input-group input-group-lg inv-amount-block center-block "> 
 
        <span class="input-group-addon " id="inv-rs">Rs</span> 
 
        <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1"> 
 
       </div> 
 
       
 
       </div><br> 
 
       
 
          <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 "> 
 

 
       <div class="input-group input-group-lg inv-amount-block "> 
 
        <span class="input-group-addon " id="inv-rs">Rs</span> 
 
        <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1"> 
 
       </div> 
 
       
 
       </div>