web-dev-qa-db-ja.com

Bulmaで要素を垂直方向に中央に配置する方法は？

この<div class="columns is-vcentered">それを囲んでいる赤いセクションに？

このコードを改善するために、ここでいくつかのクラスを削除または追加する必要がありますか？提案してください。ありがとう！

私はCSSフレームワークを初めて使用します。Bootstrapを試したことはなく、代わりにBulmaを選択しました。

enter image description here

<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;
}
cssbulma
20
Ajit

.columnsがデフォルトでdisplay: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; dr; is-vcenteredのcolumns-要素に高さとフレックスを追加して、何かをします。

申し訳ありませんが、これはより多くの問題の外挿であり、解決策ではありません。

実際の解決策は、おそらく既存の hero-class を使用することだと思います。 （ちなみに、Peter Legerの答えのように、パディングを使用して手動で中央揃えします！）。

30
ippi

セクションの高さを使用しているため、列は垂直方向に中央に配置されません。 使用パディング to 増加 the height.

クラス.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>

[〜＃〜] postscript [〜＃〜]

.columns is-vcenteredを2回使用できます。その場合、セクションの高さを設定できます。

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

更新：ここでは、垂直に（= /// =）垂直に.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

1
vpibano