布尔玛框架中的列中的水平居中项目

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 居中。

任何帮助将不胜感激。 谢谢！

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 example

希望这就是你的意思。