For my portfolio website, I have chosen Bulma as the framework. Within the "how to reach me" section, I want to display my social media profiles for contact information. Ideally, I would like these profile tiles to be centered horizontally on the page. However, I am struggling to achieve this using Bulma.
Below is the code for the profile 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 guidance on how to center these tiles. I have tried using CSS {text-align: center} and {margin: auto}, but it seems ineffective. It could possibly be a preset in Bulma restricting the centering. Thank you for your assistance. Best regards, Frédéric