在 Bulma 中垂直居中元素答案

【问题标题】：Center elements vertically in Bulma在 Bulma 中垂直居中元素
【发布时间】：2017-11-01 22:14:48
【问题描述】：

我刚刚开始使用 Bulma 设置我的博客原型。有一个 footer 部分，其中包含两个等分的列。

我希望三个项目（Twitter、电子邮件等）在黄色区域中垂直居中。布尔玛有专门的课程吗？

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

【问题讨论】：

标签： css bulma

【解决方案1】：

您可以添加以下 CSS，使右侧列垂直居中。

https://codepen.io/anon/pen/XzmEgr

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

【讨论】：

根据您的建议和Vertical Centering — Solved by Flexbox，我稍微修改了一下：align-items: center;。
align-items: center (vertical) and justify-content: center (horizontal) 为我工作

【解决方案2】：

将.level右侧的高度设为100%

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

JSFiddle

【讨论】：