カラムを垂直方向に揃えるには、columnsコンテナにis-vcentered修飾子を追加します。
スポンサー
カラムオプション
さまざまな種類のカラムレイアウトを設計する
垂直方向の配置 #
最初のカラム
より多くのコンテンツを含む2番目のカラム。これにより、垂直方向の配置を確認できます。
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
</div>
</div>複数行 #
新しい行を開始する場合は常に、columnsコンテナを閉じて新しいコンテナを開始できます。ただし、is-multiline修飾子を追加して、1行に収まるよりも多くのカラム要素を追加することもできます。
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
オート
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">Auto</div>
</div>カラムのセンタリング #
.column要素の周囲に水平スペースを作成するために空のカラム（<div class="column"></div>など）を使用できますが、親の.columns要素に.is-centeredを使用することもできます。
is-half
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p class="bd-notification is-primary">
<code class="html">is-half</code><br />
</p>
</div>
</div>.is-multilineと組み合わせて使用すると、柔軟で中央揃えのリストを作成できます（サイズを変更して、さまざまなviewportサイズでセンタリングを確認してください）
is-narrow
最初のカラム
is-narrow
2番目のカラム
is-narrow
3番目のカラム
is-narrow
4番目のカラム
is-narrow
5番目のカラム
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Fifth Column
</p>
</div>
</div>