如何将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中间？

回答

相关问题