Center elements vertically in Bulma

12,974

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; 
}
Share:
12,974
Robert Strauch
Author by

Robert Strauch

Updated on June 29, 2022

Comments

  • Robert Strauch
    Robert Strauch over 1 year

    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?

    enter image description here

    (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>