Horizontally centering items in Columns in Bulma Framework

Question

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

Here's an example:

http://prntscr.com/hooo8l

I would like to center those 'class="column is-2"' in the '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.

Any help would be appreciated. Thanks!

Solution

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

Hope this is what you meant.

Comments

[filipbarak]

I've tried your solution before, but I must've written something different, since it didn't work for me. But I can say for sure this is the correct way now, rewrote it by your suggestion and it's working great! Thanks.