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

Question

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

<button class="is-center">无法使用。

- Dazzle

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

---

如何在不将盒子内的所有其他内容居中的情况下使其居中？我在我的应用程序中遇到了这种情况，每次都不得不将按钮/链接标签包装在 div 元素中，只是为了给它一个“has-text-centered”类。有更好的方法吗？ - michaelsking1993

@michaelsking1993 button 是一个内联元素，要影响内联元素，我们需要在父级上添加属性。但是，如果您的应用程序中有很多按钮，您可以创建一个自定义类并将其添加到按钮上。这里是一个示例。 - Mohammad Usman

太棒了。我在文档中看到display: table可以使其“表现得像一个表格”。为什么会这样呢？ - michaelsking1993

@michaelsking1993 display: table 会使元素表现得像一个块级元素。并且元素的宽度将取决于其内容。所以该元素将保持水平居中。 - Mohammad Usman

只有当子元素没有 display: flex 属性时，这才有效。 - Justin

Answer 2

您也可以尝试以下方法：

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

- Reda Nefzi

Answer 3

快速解决方案：将按钮包装在一个带有style="text-align:center;"的div中。

<div style="text-align: center;">
  <button class="button is-success">Center me</button>
</div>

- Dazzle

---

不明白为什么会有这么多负评。我经常使用这种方法，而且对我很有效。 - Dazzle

我猜是因为原问题在寻求一个适用于Bulma的解决方案（这个回答并没有回答问题），而且这种内联样式定义通常不被赞同，因为难以维护使用它的项目。想象一下，在你的项目中对20个元素进行这样的操作，然后需要更改它们所有的情况。对此的改进可能是创建自己的实用类并使用它，但Mohammad的解决方案是一个很好的Bulma特定解决方案。 - Stewart Sweet

难道Bulma的实现不是更本地化的做事方式的抽象，因此计算成本更高吗？ - Dazzle

@Dazzle，不，类并不比内联样式更加计算密集，（方便的）类是Bulma提供的，这样你就不必使用text-align: center指定自己的样式/类，特别是Bulma类是.has-text-centered { text-align: center !important; }。顺便说一句，像Bulma、Bootstrap等框架经常使用!important，以便框架的样式优先。 - Dexygen