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

- Ajit

---

在Stack Overflow上，我们更喜欢使用文字而不是图片，但是有关您的网站的图片是可以接受的。这是我的建议：使用照片向我们展示网站是什么，使用文本向我们展示代码（并非所有浏览器都支持图片）。 - user6250760

好的，我会保存这张图片并提供代码。 - Ajit

Answer 1

我觉得有点有趣的是默认情况下.columns没有display:flex;（它应该有吗？）。不管怎样，如果你使用一些添加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 内的子元素垂直居中。因此，您可能还需要为您的 columns 元素设置高度，以使其起作用。

我认为应该将 is-vcentered 命名为类似于 has-vcentered-content，但也许我错过了一些明显的东西。

简而言之，为 columns 元素添加高度和弹性，以便 is-vcentered 起作用。

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

我认为真正的解决方案可能是在此处使用现有的 hero-class。（顺便说一句，它像 Peter Leger 的答案一样使用填充手动居中！）

- ippi

---

这个可以工作，但是如何将项目对齐到底部？似乎没有is-vbottom。 - Čamo

is-flex-direction-column is-justify-content-flex-end - ippi

是的，我找到了。谢谢。 - Čamo

这是针对columns而不是column的。它将导致所有子元素居中显示。 - TheRealChx101

Answer 2

更新：我从谷歌搜索中来到这里，想要在.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 */
}

注意：这对于高度固定的

非常有用。

以下是一个它适用于的示例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>

Here's a sample jsfiddle

- vpibano

Answer 3

列没有垂直居中是因为您在部分中使用了高度。使用padding来增加高度。

删除类.section(在Bulma中)。

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

- user3589620

Answer 4

只需在 div.columns 上添加 .is-flex 类，就可以使用 .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>

您可以像这里演示的那样嵌套列来实现相同的效果：嵌套列。

- RedDree

---

当你有多个.column时，如何仅居中其中一个？ - TheRealChx101

@TheRealChx101，你能提供一份代码片段或解释一下你想要实现什么吗？ - RedDree

你的解决方案似乎已经起作用了。只是有点令人困惑，因为看起来 .columns 是要重新排列它的子元素，而在我的情况下，我想要重新排列第一个 .column 中的内容。 - TheRealChx101

您可以嵌套类名以达到相同的效果。将.columns应用于具有类.column的元素，它将相应地对其子元素进行排序。 - RedDree

@TheRealChx101 我同意你对命名有些误导的看法。.is-vcentered 应用了 align-items: center;，而 is-centered 则应用了 justify-content: center; 在子元素上。这听起来像是它本身被居中和垂直居中了。 - RedDree

Answer 5

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

- Tovi Newman

---

它应该在哪里使用？ - Luke

将其作为内联样式添加到要居中的元素中。或者您可以创建一个具有该CSS属性的新类，然后将您的新类添加到HTML元素中。 - Tovi Newman