Center elements vertically in Bulma

Question

I just started setting up my blog prototype with Bulma. There is a footer section with two equally divided columns.

I'd like the three items (Twitter, Email, etc.) to be vertically centered in the yellow area. Is there any special class for that available in Bulma?

(Please see the full example on 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>

Answer 1

You could add the following CSS so the right side column so it is vertically centered.

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

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