列内中心按钮

Question

我在用Bulma。考虑以下HTML

<div class="container">
  <div class="columns">
    <div class="column has-text-centered">
      <h1 class="title">
        Welcome! :)
      </h1>
      <div class="buttons">
        <a href="/login" class="button">Login now!</a>
        <a href="/register" class="button">Register now!</a>
      </div>
    </div>
  </div>
</div>

现在，标题是居中的，但按钮不是。当然，如果我们将display: block;设置为将按钮组合在一起的div，它们也会居中。但我找不到任何例子，我也不确定这是否是解决问题的方法。

有更多的“斗牛”的方式来解决这个问题吗？

Answer 1

这一点我不太确定。

我试图重现这个问题，但似乎按钮是居中的。

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
  <div class="columns">
    <div class="column has-text-centered">
      <h1 class="title">
        Welcome! :)
      </h1>
      <div class="buttons">
        <a href="/login" class="button">Login now!</a>
        <a href="/register" class="button">Register now!</a>
      </div>
    </div>
  </div>
</div>

​

也许还有其他规则可以推翻这种行为？

编辑：

在0.4.0和0.8.0之间的相同版本中，它们似乎利用了flex box布局。

在您共享的示例中，buttons类具有display: flex-box，但它忽略了属性justify-content: center;，以使该div的内容对齐。

我不知道是预期的行为还是错误。

下面是一个工作示例：https://jsfiddle.net/gix_lg/73vmofqa/1/

Answer 2

你试过“是以-v为中心”而不是“以文本为中心”吗？此外，还可以使用带有class=“列”的div来创建.column元素周围的水平空间，或者在父.columns元素上使用以..is为中心的

您试过检查页面以查看css吗？