在Bulma Framework的Columns中水平居中对齐项目

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>

我想把里面的按钮置于-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小提琴的例子

希望这就是你的意思.