如何在 div 中居中输入组？答案

【问题标题】：How to center input-group inside a div?如何在 div 中居中输入组？
【发布时间】：2022-01-27 23:14:43
【问题描述】：

我想将.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>

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

这里是fiddle

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

只需将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>

【讨论】：

稍微解释一下就好了。

【解决方案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%) 来演示居中。

Demo on Codeply

【讨论】：

【解决方案3】：

复制下面的代码并粘贴到您的文件中并运行检查此输入框是否居中对齐并且也响应。

本示例基于 bootstrap v3.4

<!DOCTYPE html>
<html>

<head>
  <title>Center Input box demo</title>
  <link href="https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <form class="row" action="" method="post" id="search_project_form">
      <div class="col-md-4 col-sm-2 col-sm-offset-4 col-xs-offset-2">
        <input type="text" name="search_group" id="search_group" class="form-control" placeholder="Group Number" required>
      </div>
      <button type="submit" class="btn btn-primary">Download Data</button>
    </form>
  </div>

</body>
</html>

【讨论】：