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

我认为它有点滑稽,默认情况下.columns没有display:flex;(它应该有吗？).无论如何,如果你使用添加flex的东西,例如:

class="columns is-desktop is-vcentered"

那么你来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,但也许我错过了一些明显的东西.

TL;博士; 为columns-element 添加height和flex is-vcentered以执行某些操作.

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

我相信真正的解决方案可能是在这里使用现有的英雄级别.(就像Peter Leger的回答一样,顺便说一下手动使用填充中心!).

Answer 2

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

删除课程.section（在布尔玛中）

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

并使用您自己的填充。

例子

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

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

section {
  padding: 100px 15px;
}

后记

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

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

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

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

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具有固定高度的 's非常有用。

这是它处理的一个示例 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