html - 水平居中对齐带有伴随文本的 Bootstrap 按钮

Question

我正在尝试水平居中对齐带有伴随文本的 Bootstrap 按钮。但是我没有得到预期的输出。谁能告诉我为什么它不居中？

<div class="col-md-12 well">
    <div class="col-md-6">
        <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
    </div>
    <div class="col-md-6 text-center">
        <span><em> Already have an account? Login</em></span>
    </div>
</div>

我创建了一个 Plunker demo .在较小的屏幕上，它按预期工作。但在较大的屏幕上，它没有正确对齐。

Answer 1

使用 col-md-offset-3 和 col-md-6 居中对齐您的内容:

<div class="col-md-offset-3 col-md-6">
   ...
</div>

此外，在外部 div 而不是 span 标签上设置 text-center 类:

<div class="col-md-offset-3 col-md-6 text-center">
    <em> Already have an account? Login</em>
</div>

参见 fiddle here .