引导程序中表单下的中心按钮

Posted 2023-03-29

【中文标题】引导程序中表单下的中心按钮

【英文标题】：Center button under form in bootstrap

【发布时间】：2013-03-29 20:43:51

【问题描述】：

我在使用 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>

【问题讨论】：

你在按钮元素上试过margin: 0 auto吗？我怀疑 text-align 不起作用是因为按钮被声明为块级元素。

@Terry 我试过边距，按钮在同一个地方：/

您需要在 Fiddle 中复制问题，以便我们提供帮助。

【参考方案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

---

在此处的Bootstrap 文档中查找form-actions：

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

【讨论】：

嘿，在 JSBin 中看起来不错，但请看一下图片。还是同一个地方。

注意：我的答案中的 CSS 代码必须在 Bootstrap CSS 之后。

细线出现，我认为按钮现在在中心。可能是表格有问题？

你能用你所有的 HTML 标记创建一个 JS Bin 吗？在您在问题上显示的图片中，我看不到细线。也许您当前的 CSS 代码正在干扰...

i45.tinypic.com/2rz83mc.png .form-actions 还有边距、顶部填充、边框等，所以我只粘贴你给的。在 html 上也一样。但正如你在图片上看到的（那是整个屏幕），按钮在左边。

【参考方案2】：

使用 Bootstrap 3，您可以使用“文本中心”样式属性。

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

【参考方案3】：

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

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

【参考方案4】：

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>

【讨论】：

按钮变大并再次向左移动

【参考方案5】：

尝试添加这个类

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/在分页->分页器下查看

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

【参考方案6】：

我这样做<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>

【参考方案7】：

你可以用这个

<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>

【参考方案8】：

使用Bootstrap，正确的方法是使用offset类。使用数学来确定左偏移。示例：您想要一个按钮在移动设备上全宽，但在平板电脑、台式机、大型台式机上为 1/3 宽度并居中。

因此，在 12 个“引导”列中，您使用 4 个进行偏移，4 个用于按钮，然后 4 个在右侧是空白的。

看看有没有用！

【参考方案9】：

使用 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

【参考方案10】：

尝试给予

默认宽度，以块状显示，以边距居中：0 auto;

像这样：

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

【参考方案11】：

完全可以试试这个：

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