Question

我正在尝试将引导按钮水平居中对齐并附带文本。但我没有得到预期的产量。有人能告诉我为什么它不以中心为主？

<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上设置text-center类，而不在span标记上设置：

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

请参阅小提琴here。

Answer 2

试试这个：

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

Answer 3

在span标记之外使用div

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

Answer 4

试试这段代码......

   Time             field1_agg 
   09:37.43.000      0.0   #=> count of field1 = 1 / count of fied1 = 0 in all rows with 09:37.43.xxx -> 0/1 = 0
   09:37.44.000      0.5   #=> count of field1 = 1 / count of fied1 = 0 in all rows with 09:37.44.xxx -> 1/2 = 0.5
   09:37.45.000      1.0   #=> count of field1 = 1 / count of fied1 = 0 in all rows with 09:37.45.xxx -> 1/1 = 1.0
   09:37.46.000      1.0   #=> if count of field1 = 0 is zero in all rows with 09:37.46.xxx, then 1

Plunker Link

Answer 5

经过一番摆弄后我发现了一个解决方案..它不是一个自助解决方案。但它只有几行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;
  }

水平居中对齐引导按钮和附带的文本

5 个答案: