Bootstrap / CSS输入表单不居中答案

【问题标题】：Bootstrap / CSS Input Form not centringBootstrap / CSS输入表单不居中
【发布时间】：2014-07-07 10:27:45
【问题描述】：

Bootstrap 输入表单未居中，即使我已将其设置为居中。这是它的样子：

表格不居中：

正确的形式

红色是问题，绿色是我想要的。这是代码。

CSS：

.form-control {
  height: 50px;
  width: 330px;
  padding-left: 5px;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

HTML：

           <form class="form-inline" role="form">
               <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Enter email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">Early Access</button>
                </div>
           </form>

所有的帮助都会很棒，谢谢。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

this 能解决您的问题吗？

只是在它周围添加了一个包装器：

#wrapper {
  text-align:center;
}

.form-control {
  margin: 0 auto;
}

【讨论】：

那么您需要发布更多代码。这适用于您发布的内容。
您的 JSFiddle 示例不起作用。看看，和我遇到的一样的问题。表格粘在左边。
添加了margin: 0 auto，现在好像可以用了，再检查一下。
折叠结果元素。它打破了，表格粘在左边

【解决方案2】：

关于这些方面的事情怎么样：

用<div class="container"> 包裹你的东西，使所有内容居中。
将 id 添加到同一个 div 并将宽度设置为您想要的任何值。
将按钮的宽度设置为 100%。

html:

<div class="container" id="myContainer">
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Enter email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
        </div>
        <br>
        <div class="form-group">
            <button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
        </div>
    </form>
</div>

css:

#myContainer {
    width: 350px;
}

#earlyAccessBtn {
    width: 100%;
}

DEMO

【讨论】：