如何將div放在input-group中間？

我想將.input-group置於<div>的中間。當我使用類center-block時，<span>佔據全寬並將其下方的輸入字段向下推。我想把他們集中在一起。如何將div放在input-group中間？

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

我想將它們集中在一起，就像它們默認情況下一樣。

這裏是fiddle

來源

2017-02-25 Naveen Kumar

只需更改CSS顯示屬性爲.center-block

編輯：display: block和display: table的差異在於 - 。 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>

來源

2017-02-25 05:56:33 Chaitali

稍微解釋一下就好了。 –

如何將div放在input-group中間？

回答

相關問題