我刚开始用Bulma设置我的博客原型.页脚部分有两个等分的列.
我希望这三个项目(Twitter,电子邮件等)在黄色区域中垂直居中.布尔玛有没有特别的课程?
(请参阅完整的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,使右侧列垂直居中.
https://codepen.io/anon/pen/XzmEgr
.footer .has-text-right { display: flex; justify-content: center; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。