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

Horizontally centering items in Columns in Bulma Framework

提问by filipbarak

I would like to center my content horizontally inside of the columns of Bulma.

我想将我的内容水平居中在 Bulma 的列中。

Here's an example:

下面是一个例子：

http://prntscr.com/hooo8l

http://prntscr.com/hooo8l

I would like to center those 'class="column is-2"'in the 'columns' div.

我想将那些'class="column is-2"'放在 ' columns' div 中。

Here's how my code starts:

这是我的代码的开始方式：

<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>

And I would like to center that is-2 with the button inside.

我想将 is-2 与里面的按钮居中。

Any help would be appreciated. Thanks!

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

回答by meldev

If you want to center align the buttons within their container and their container within the available space, this is what you want to do the following:

如果您想将其容器内的按钮和可用空间内的容器居中对齐，您需要执行以下操作：

<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

JS小提琴示例

Hope this is what you meant.

希望这就是你的意思。