无法在 Webkit 中将 Bootstrap 输入组居中，但在 Firefox 中可以正常工作答案

【问题标题】：Can't center Bootstrap input-group in Webkit, but works fine in Firefox无法在 Webkit 中将 Bootstrap 输入组居中，但在 Firefox 中可以正常工作
【发布时间】：2015-01-02 12:16:51
【问题描述】：

我有一个无法居中的顽固输入组，完全被卡住了。特别令人困惑的是，它在 Firefox 中运行良好，但在 Webkit 浏览器中却不行。

.product {
  margin-bottom: 4rem;
  text-align: center;
}

.product 
  input[type="text"] {
    text-align: center;
    width: 90px;
  }

.product
  .prod-name {
    font-size: 1.8rem;
  }

.product
  .qty-choice {
    margin-top: 1rem;
  }

.product
    .input-group {
      margin-bottom: 1rem;
    }

.product .inline-block {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  
}

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div class="product">
          <img src="http://placekitten.com/240/240" width="240"
               height="240">
          <div class="prod-name">{{name}}</div>
          <div class="sku">{{sku}}</div>
          <div class="size">{{width}}" W x {{height}}" H</div>
          <div class="price">${{price}}</div>
          <div class="qty-choice inline-block">
            <div class="input-group">
              <span class="input-group-addon">Variation 1</span>
              <input class="form-control qty"
                     type="text" placeholder="Enter Qty">
            </div>
          </div>
          <div>
            <button class="btn btn-primary add-to-cart">Add to
              Cart</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>
</html>

我仍然掌握 Bootstrap 的窍门，但将事物居中非常困难。我假设我的 .inline-block 类不是解决此问题的正确方法，否则它可以在两种浏览器中工作。我做错了什么？

【问题讨论】：

稍微搜索一下告诉我可能在 Webkit 中 display: inline-block 存在某种问题。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

设置要显示的元素：通过边距阻止和居中。可作为 mixin 和 class 使用。

 <div class="center-block">...</div>

// 类

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

【讨论】：

它工作正常。输入组就像一张桌子，你不能给输入一个宽度，而不是另一个，我很惊讶它在 Webkit 中工作。 jsbin.com/hoxubu/1/edit