如何在 Bulma 中水平居中瓷砖？

Question

我正在为我的投资组合网站使用 Bulma。在 "how to reach me" 部分，我想将我的个人资料放在社交网络上以供参考。在最好的情况下，带有我的个人资料的图块将水平居中。但是不知道怎么用Bulma实现。

这是方块的代码：

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

对于如何将这些图块居中的任何帮助，我将不胜感激。我尝试了一些技巧，例如 CSS {text-align: center} 或 {margin: auto} 但它似乎不起作用。也许这是不允许它的布尔玛预设。最好的祝福，弗雷德里克

Answer 1

.tile已经有flex显示，.tile.is-vertical有flex-direction: column。要居中社交媒体块，您只需添加 align-items: center 规则。像这样：

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

如果此规则覆盖另一个规则 (align-items: stretch)，则按如下方式执行：

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

如何在 Bulma 中水平居中瓷砖？

how to center tiles horizontally in Bulma?

html

css

centering

bulma