在Bulma中垂直居中元素

Question

我刚开始使用Bulma搭建博客原型。有一个包含两个等分列的

区域。

我希望这三个项目（Twitter，Email等）在黄色区域中垂直居中。Bulma中是否有可用于此的特殊类？

（请查看完整的https://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>

- Robert Strauch

Answer 1

您可以添加以下CSS，使右侧列垂直居中。 https://codepen.io/anon/pen/XzmEgr

.footer .has-text-right {
  display: flex;
  justify-content: center; 
}

- Hubvill

---

根据您的建议和使用Flexbox解决垂直居中问题，我稍微修改了它，加入了这个：align-items: center;。 - Robert Strauch

align-items: center（垂直居中）和justify-content: center（水平居中）对我很有效。 - danday74

Answer 2

使右侧的.level高度为100%。

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

JSFiddle

可以翻译为：

{{链接1:JSFiddle}}

- user3589620