web-dev-qa-db-ja.com

Bulmaで要素を垂直方向に中央揃え

Bulmaでブログのプロトタイプを設定し始めたところです。 2つの均等に分割された列を持つfooterセクションがあります。

3つのアイテム（Twitter、Eメールなど）を黄色の領域の垂直方向の中央に配置したいと思います。 Bulmaで利用できる特別なクラスはありますか？

enter image description here

（完全な codepen.ioの例 を参照してください。）

<footer class="footer" style="background-color: lightpink;">
    <div class="columns">
      <div class="column has-text-centered-touch" style="background-color: cyan;">
        <p>Some copyright stuff...</p>
        <p>Templated with <a href="https://bulma.io" target="_blank">Bulma</a>. Published with <a href="https://gohugo.io/" target="_blank">Hugo</a>.</p>       
      </div>
      <div class="column has-text-right" style="background-color: yellow;">
        <div class="level">
          <div class="level-left"></div>
          <div class="level-right">
            <a class="level-item" href="#">Twitter Icon</a>
            <a class="level-item" href="#">Email Icon</a>
            <a class="level-item" href="#">LinkedIn Icon</a>
          </div>
        </div>
      </div>
    </div>
</footer>
cssbulma
5
Robert Strauch

次のCSSを追加して、右側の列を垂直方向の中央に配置することができます。

https://codepen.io/anon/pen/XzmEgr

.footer .has-text-right {
  display: flex;
  justify-content: center; 
}
8
Hubvill

右側の.levelの高さを100%にします

.right-side > .level {
  height: 100%;
}

JSFiddle

1
Sun