如何在 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

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

删除 class .section（布尔玛）

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

并使用您自己的填充。

例子

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

section {
  padding: 100px 15px;
}

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

后记

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

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

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

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

Answer 2

我认为 .columns 默认没有 display:flex; 有点好笑（也许它应该有？）。无论如何，如果你使用一些增加弹性的东西，例如：

class="columns is-flex is-vcentered"

然后你从 is-desktop 得到 display:flex，现在 is-vcentered 突然按预期工作了。

我还认为语义不对，因为 is-vcentered 表明是 columns 垂直居中。但它实际上做了什么（来自来源）：

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

就是让columns的children在columns里面垂直居中。因此，您可能还需要设置 columns 元素的高度才能使其正常工作。

我认为 is-vcentered 应该命名为 has-vcentered-content，但也许我遗漏了一些明显的东西。

tl；博士；向 `columns` 元素添加高度和弯曲度，以便 `is-vcentered` 执行某些操作。

抱歉，我想这更多是对问题的推断，而不是解决方案。

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

Answer 3

更新：我是通过谷歌搜索垂直对齐.content而不是.columnclass中的项目来到这里的。其他人可能出于同样的原因偶然发现了这个地方。

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

.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

只需在 div.columns 上添加 .is-flex class，.is-centered 和 .is-vcentered 都可用（Bulma 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>

Answer 5

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

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

How to vertically center elements in Bulma?

css

bulma

tl；博士；向 columns 元素添加高度和弯曲度，以便 is-vcentered 执行某些操作。

tl；博士；向 `columns` 元素添加高度和弯曲度，以便 `is-vcentered` 执行某些操作。