Question

我在Bootstrap上遇到了一些问题。我使用span6 offset3来定位表单和按钮，并且现在不知道如何在此表单下居中按钮。我尝试使用text-align: center但仍然在左边更多。

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                <input class="input-xxlarge" type="text" placeholder="Email..">
                <p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
            </form>
        </div>
    </div>
</div>

Answer 1

删除<p>代码并在<div class="form-actions">内添加按钮，如下所示：

<div class="form-actions">
    <button type="submit" class="btn">Confirm</button>
</div>

然后使用：

扩充CSS类

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

这是一个JS Bin演示：http://jsbin.com/ijozof/2

在form-actions doc处查找Bootstrap：

http://twitter.github.io/bootstrap/base-css.html#buttons

Answer 2

使用Bootstrap 3，您可以使用＆＃39;文本中心＆＃39;造型属性。

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>

Answer 3

Width:100%和text-align:center可以根据我的经验使用

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>

Answer 4

尝试添加此课程

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

我在<div class=pager><button etc etc></div>范围内尝试过，但效果很好

请参阅分页下的http://getbootstrap.com/components/ - ＆gt;寻呼机

这看起来像是以正确的引导类为中心，text-align: center;用于文本而不是图像和块等。

Answer 5

我这样做<center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>

Answer 6

使用Bootstrap，正确的方法是使用offset类。使用math来确定左偏移量。示例：您希望移动设备上的按钮全宽，但宽度为1/3，并且以平板电脑，桌面，大型桌面为中心。

12＆＃34; bootstrap＆＃34;列，你使用4来偏移，4用于按钮，然后4在右边是空白。

看看是否有效！

Answer 7

使用Bootstrap，您只需使用课程text-center：

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

DEMO

Answer 8

如果您使用的是 Bootstrap 4 ，请尝试以下操作：

<div class="mx-auto text-center">
    <button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>

Answer 9

正在完全尝试以下操作：

<div class="button pull-left" style="padding-left:40%;" >

Answer 10

您可以使用此

<button type="submit" class="btn btn-primary btn-block w-50 mx-auto">Search</button>

看起来像这样

完整的表单代码-

<form id="submit">
    <input type="text" class="form-control mt-5" id="search-city" 
           placeholder="Search City">
    <button type="submit" class="btn btn-primary mt-3 btn-sm btn-block w-50 
            mx-auto">Search</button>
   </form>

Answer 11

尝试给出

默认宽度，用块显示它并以边距为中心：0 auto;

像这样：

<p style="display:block; line-height: 70px; width:200px; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>

在引导程序中的窗体下的中心按钮

11 个答案: