如何在布尔玛中垂直居中放置元素? [英] How to vertically center elements in Bulma?

问题描述

如何将这个< div class ="columns is-vcentered"> 垂直居中到包围它的红色部分?

How can I vertically center this <div class="columns is-vcentered"> to that red colored section which is enclosing it?

我应该在此处删除或添加一些类来改进此代码吗?请给我建议.谢谢！

And should I remove or add some classes here to improve this code? Please suggest me. Thanks!

我是CSS框架的新手，从未尝试过Bootstrap，而是选择了布尔玛.

I am new to CSS framework, never tried Bootstrap and instead opted for Bulma.

<section id="eyes" class="section">
    <div class="container">
        <div class="columns is-vcentered">
            <div class="column">
                <h1>Eyes on what matters</h1>
                <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
            </div>
            <div class="column">
                <img class="image" src="img/roll.jpg" alt="">
            </div>
        </div>
    </div>
</section>

在CSS中，除了着色元素，我只是这样做:

In CSS apart from coloring elements, I've only done this:

section {
    height: 70vh;
}

推荐答案

我认为 .columns 默认没有 display:flex; (应该有吗?).无论如何，如果您使用添加弹性的东西，例如:

I think it's a bit funny that .columns does not have display:flex; by default (should it have perhaps?). Anyway, if you use something that adds flex, for example:

class="columns is-desktop is-vcentered"

然后您从 is-desktop 获得了 display:flex ，现在突然 is-vcentered 可以正常工作了.

then you get display:flex from is-desktop and now suddenly is-vcentered works as intended.

我还认为语义是不正确的，因为 is-vcentered 表示 columns 是垂直居中的.但是它实际上是做什么的(来自源代码):

Also I think the semantics is off since is-vcentered suggests that it is columns that gets vertically centered. But what it actually does (from source):

.columns.is-vcentered {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

用于使 columns 的子代在 columns 中垂直居中.因此，您可能还需要设置 columns 元素的高度，以使其起作用.

is to make children of columns to be vertically centered inside columns. So you likely also need to set a height of your columns element for this to work.

我认为 vcentered 应该命名为 has-vcentered-content 之类的东西，但也许我缺少明显的东西.

I think is-vcentered should be named something like has-vcentered-content, but perhaps I'm missing something obvious.

对不起，我想这更多是问题的推论，而不是解决方案.

Sorry, I guess this is more of a extrapolation of the problem and not a solution.

我相信真正的解决方案可能是在此处使用现有的英雄类.(顺便提一下，就像彼得·莱格的答案一样，手动使用填充居中！).

I believe the real solution is probably to use the existing hero-class here. (Which by the way centers manually using paddings, just like in Peter Leger's answer!).

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