如何将输入组居中放置在 div 中？

Question

我想将.input-group内部 a居中<div>。当我使用 class 时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>

我想像默认情况下一样将它们集中在一起。

这是小提琴

Answer 1

只需更改CSSfor 中的display 属性.center-block

编辑：display: block和之间的区别display: table是 - 。display: block- 将扩展到可用空间的 100%，而display: table- 将仅与其内容一样宽。

因此，在后一种情况下，您的spanandinput 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>
              

Answer 2

在Bootstrap 4 中，center-block已被替换为mx-auto，并且输入组已更改为display:flex。以下是如何在 Bootstrap 4 中居中...

     <div class="col-12">
          <div class="input-group input-group-lg w-25 mx-auto">
                <div class="input-group-prepend">
                    <span class="input-group-text">Rs</span>
                </div>
                <input type="text" class="form-control" placeholder="Your Amount">
          </div>
    </div>

请记住，这input-group将填充父级的宽度，因此在这种情况下，我添加了w-25(width:25%) 来演示居中。

Codeply 上的演示