列内的中心按钮

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 将按钮组合在一起，它们也会居中。但我找不到任何例子，我不确定这是否是去这里的方式。

有没有更"Bulma-like"的方法解决这个问题？

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 class 具有 display: flex-box 但它缺少属性 justify-content: center; 用于居中 div.
我不知道这是预期的行为还是错误。

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

Answer 2

你试过用“is-vcentered”代替"has-text-centered"吗？此外，您可以通过使用带有 class="column" 的 div 来使用空列，以在 .column 元素周围创建水平 space，或使用 .is-centered 在父元素上.columns 元素

您是否尝试检查您的页面以查看 css？

列内的中心按钮

Center buttons inside column

css

bulma