CODEWITHSUNDEEP
cssbulma
Robert Strauch
Robert Strauch

Reputation: 12896

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?

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>

Upvotes: 7

Views: 13626

Answers (2)

user3589620
user3589620

Reputation:

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

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

JSFiddle

Upvotes: 1

Hubvill
Hubvill

Reputation: 504

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

Upvotes: 8

Related Questions