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

Question

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

这是一个例子：

我想将 '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

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

<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

希望这就是你的意思。

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

Horizontally centering items in Columns in Bulma Framework

html

javascript

css

sass

bulma