Bulma：如何让按钮在盒子中居中？

Question

<div class="box">
 <button class="button">Center me</button>
</div>

<button class="is-center"> 不工作。

原文由 Dazzle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，有一种原生方式。

Bulma 提供 has-text-centered 文本居中类， inline 和 inline-block 元素。

您可以使用以下代码：

 <div class="box has-text-centered">
  <button class="button">Center me</button>
</div>

演示：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.css" rel="stylesheet"/>
<div class="box has-text-centered">
 <button class="button">Center me</button>
</div>

原文由 Mohammad Usman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您也可以尝试：

 <div class="columns is-centered">
    <div class="column is-half">
        <button class="button">Center me</button>
    </div>
</div>

原文由 Reda Nefzi 发布，翻译遵循 CC BY-SA 4.0 许可协议