将引导按钮与随附文本水平居中对齐答案

【问题标题】：Horizontally center-align a bootstrap button with accompanying text将引导按钮与随附文本水平居中对齐
【发布时间】：2016-04-23 15:07:26
【问题描述】：

我正在尝试将引导按钮与随附的文本水平居中对齐。但我没有得到预期的输出。谁能告诉我为什么它没有居中？

<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。在较小的屏幕中，它按预期工作。但在较大的屏幕中，它无法正确对齐。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

.flex-centered {
  display: flex;
  justify-content: center;
  margin-top: 31px;
  height: 46px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 well">
  <div class="col-md-6 text-center">
    <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
  </div>
  <div class="col-md-6">
    <div class="flex-centered">
      <em> Already have an account? Login</em>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

经过一番摆弄，我找到了一个解决方案..它不是一个引导解决方案。但它只有几行css。如果有人在这里找到引导方式，我将更改接受的答案。谢谢。

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

这里是自定义 css

  /* centered columns styles */
  .row-centered {
    text-align:center;
  }
  .col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
  }

【讨论】：

【解决方案3】：

试试这个代码...

<body>
  <div class="row">
    <div class="col-md-6 col-md-push-3">
      <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
    </div>
    <div class="col-md-6 col-md-offset-3">
      <span><em> Already have an account? Login</em></span>
    </div>
  </div>
</body>

Plunker Link

【讨论】：

它将文本推到底部..我正在寻找水平对齐，正如您在我的 plunker 中看到的那样

【解决方案4】：

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

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

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

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

见小提琴here。

【讨论】：

是的，在外面添加 'text-center' 会使文本居中。但它倾斜到面板的顶部。如何保持面板中心的文本和按钮正确对齐？我也不想使用 col-md-offset 因为我希望按钮和文本在大屏幕面板的同一行中..

【解决方案5】：

在 span 标签外使用 div

<div  style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span>
        </div>

【讨论】：