如何在Bulma中垂直居中元素？

Question

如何将此<div class="columns is-vcentered">垂直居中于包围它的红色部分？

我应该在这里删除或添加一些类来改进这段代码吗？请建议我。谢谢！

我是CSS框架的新手，从未尝试过Bootstrap而是选择了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中除了着色元素之外，我只是这样做了：

section {
    height: 70vh;
}

Answer 1

我认为display:flex;默认情况下没有class="columns is-desktop is-vcentered" 有点可笑（或许它应该有吗？）。无论如何，如果你使用增加flex的东西，例如：

display:flex

然后您从is-desktop获得is-vcentered，现在突然is-vcentered按预期工作。

此外，我认为语义已关闭，因为columns表明它是.columns.is-vcentered { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 垂直居中。但它实际上做了什么（来自消息来源）：

columns

是让columns的孩子在columns内垂直居中。因此，您可能还需要设置is-vcentered元素的高度才能生效。

我认为has-vcentered-content应该被命名为columns，但也许我错过了一些明显的东西。

TL;博士;为is-vcentered - {{1}}元素添加高度和弹性以执行某些操作。

对不起，我想这更像是对问题的推断而不是解决方案。

我认为真正的解决方案可能是在这里使用现有的hero-class。 （就像Peter Leger的回答一样，顺便说一下手动使用填充中心！）。

Answer 2

列未垂直居中，因为您已使用该部分的高度。 使用 填充 增加 高度。

删除课程.section（在Bulma中）

.section {
  background-color: white;
  padding: 3rem 1.5rem;
} 

并使用自己的填充。

示例

＆＃13;

＆＃13;

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

section {
  padding: 100px 15px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="red-bg">
  <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="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>
<section class="orange-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
      <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>
  </div>
</section>
<section class="red-bg">
  <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="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

POSTSCRIPT

您可以使用.columns is-vcentered两次。在这种情况下，您可以为该部分设置高度。

＆＃13;

＆＃13;

section {
  height: 70vh;
  padding: 15px;
}

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="columns is-vcentered is-centered red-bg">
  <div class="container">
    <div class="columns is-vcentered is-centered">
      <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="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>
<section class="columns is-vcentered orange-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
      <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>
  </div>
</section>
<section class="columns is-vcentered red-bg">
  <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="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

更新：我是从谷歌搜索一种方法来垂直对齐.content而不是.column类中的项目的。出于相同的原因，其他人可能会偶然发现这个地方。

如果您尝试垂直对齐.content类中的元素，这就是我所做的：

.content.is-vcentered {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* used this for multiple child */
  align-items: center; /* if an only child */
}

注意：这对于高度固定的div来说非常有用。

这是它工作的示例html结构

<div class="content is-vcentered has-text-centered">
  <h1>Content</h1>
  <p>that might be from</p>
  <p>wysiwyg containing</p>
  <p>multiple lines</p>
</div>

<div class="content is-vcentered">
  <p>Some text line</p>
</div>

这是一个示例jsfiddle

Answer 4

晚了一点，但是我认为在这种情况下最好的解决方法是使用margin: auto;。

Answer 5

只需在.is-flex上添加div.columns类，.is-centered和.is-vcentered都将可用（布尔玛v.0.7.1）：

https://bulma.io/documentation/modifiers/responsive-helpers/

这是我的完整示例，其中组件位于屏幕中心：

<template>
  <div class="columns is-flex is-vcentered is-centered"> 
    <div class="column is-two-thirds-mobile is-half-tablet">
        <Login />
    </div>
  </div>
</template>