如何在布尔玛水平居中瓷砖？ [关闭]

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