在Bulma框架中水平居中列中的项目

Question

我希望能够在Bulma的列中水平居中我的内容。

下面是一个示例：

http://prntscr.com/hooo8l

我想把这些 'class="column is-2"' 居中在 'columns' div 中。

以下是我的代码起始部分：

<div class="columns is-vcentered">
    <div class="column is-three-fifths is-offset-one-fifth has-text-centered">
        <div class="columns is-desktop is-vcentered">
            <div class="column is-2">
                    <button mat-raised-button color="primary" (click)="initTimer()">
                        <mat-icon>play_arrow</mat-icon>
                        Start Timer
                    </button>
            </div>

我希望将is-2和按钮居中对齐。非常感谢您的帮助！

- filipbarak

Answer 1

如果你想让按钮在它们的容器内居中对齐，并使容器在可用空间内居中，那么你需要执行以下操作：

<div class="columns is-centered">
  <div class="column has-text-centered is-2">
    <a class="button">Button 1</a>
  </div>
  <div class="column has-text-centered is-2">
    <a class="button">Button 2</a>
  </div>
  <div class="column has-text-centered is-2">
    <a class="button">Button 3</a>
  </div>
  <div class="column has-text-centered is-2">
    <a class="button">Button 4</a>
  </div>
</div>

JS Fiddle示例

希望这就是你想要的。

- meldev

---

我之前尝试过你的解决方案，但可能是因为我写了不同的东西，所以它对我没有起作用。但我可以确定现在这是正确的方法，按照你的建议重写了它，现在它运行得很好！谢谢。 - filipbarak