Center elements vertically in Bulma

问题

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>

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

回答2:

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

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

JSFiddle

来源：https://stackoverflow.com/questions/47064526/center-elements-vertically-in-bulma