how to center tiles horizontally in Bulma?

Question

I am using Bulma for my portfolio website. In the "how to reach me" section, I'd like to put my personal profiles on social networks for information. In the best, the tiles with my profiles would be centered horizontally. But I don't know how to achieve it with Bulma.

Here is the code of the tiles :

.tile {
  text-align: center;
  margin:auto;
}

<div className="container">
    <div className="tile is-ancestor">
        <div className="tile is-parent is-vertical"  >
          <div className="tile is-child is-4 box">
            <p className="title">Linkedin</p>
            <a href="linkedin.com/in/frederic--lang" >Frédéric Lang</a>
          </div>
          <div className="tile is-child is-4 box">
            <p className="title">Twitter</p>
            <a href="https://twitter.com/Fredestrik?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @Fredestrik</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
          </div>
          <div className="tile is-child is-4 box">
            <p className="title">Github</p>
            <a href="https://github.com/Fredestrik">Frédéric Lang</a>
          </div>
        </div>
    </div>
</div>

I would appreciate any help about how to center these tiles. I tried some tricks like CSS {text-align: center} or {margin: auto} but it does not seem to work. Maybe it is a bulma preset that does not allow it. Best regards, Frédéric

Answer 1

.tile already has flex display, and .tile.is-vertical has flex-direction: column. To center social media blocks, you just need to add the align-items: center rule. Like this:

.tile {
  display: flex;
  align-items: center;
}

If this rule overrides another rule (align-items: stretch), then do it like this:

.tile {
  display: flex;
  align-items: center!important;
}