在布尔玛垂直居中放置元素 [英] Center elements vertically in Bulma

问题描述

我刚刚开始与Bulma建立我的博客原型。有一个 footer 部分，其中两列均分。

I just started setting up my blog prototype with Bulma. There is a footer section with two equally divided columns.

我想要这三个项目（Twitter，电子邮件等）在黄色区域中垂直居中。布尔马中是否有适用于该类的特殊类？

I'd like the three items (Twitter, Email, etc.) to be vertically centered in the yellow area. Is there any special class for that available in Bulma?

（请在codepen.io上查看完整的示例。）

(Please see the full example on 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>

推荐答案

您可以添加以下CSS，因此在右侧列因此它是垂直居中的。

You could add the following CSS so the right side column so it is vertically centered.

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

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

这篇关于在布尔玛垂直居中放置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！