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>

Yurev

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; 
}

Big

Following your suggestion and Vertical Centering — Solved by Flexbox I slightly modified it with this: align-items: center;. – Yurev

align-items: center (vertical) and justify-content: center (horizontal) worked for me – Conjugated

Answer 2

Make the height of the .level on the right side 100%

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

JSFiddle

Oleta