web-dev-qa-db-ja.com

ブートストラップ4中央の縦と横の配置

フォームのみが存在するページがあり、フォームを画面の中央に配置したい。

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

justify-content-centerはフォームを水平方向に揃えますが、垂直方向に揃える方法がわかりません。 align-items-centerとalign-self-centerを使おうとしましたが、うまくいきません。

何が足りないの？

デモ

csstwitter-bootstrapbootstrap-4centering
96
user348173

Update 2019 - ブートストラップ4.3.1

必要ない追加のCSS があります。 Bootstrapにすでに含まれているものは機能します。フォームのコンテナが フルハイト であることを確認してください。ブートストラップ4は100％の高さのためのh-100クラスを持っています...

縦中央：

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

中央に配置するアイテムを含むコンテナの高さは100％にする必要があります （または中央に配置されたアイテムに対する必要な高さがなんであれ）

注：任意の要素でheight:100%（ percentage height ）を使用する場合、要素 そのコンテナの高さを取ります 。最新のブラウザでは、希望する高さを得るために、height:100vh;の代わりにvh単位%を使用できます。

したがって、HTML、本体{高さ：100％}を設定することができ、または代わりmin-vh-100のコンテナに新しいh-100クラスを使用します。

横中央：

  • text-centerdisplay:inline要素＆カラムコンテンツを中央に
  • mx-auto内部フレックス要素をセンタリングします
  • offset-*またはmx-autoは、 中央の列 （.col-）に使用できます。
  • row内のjustify-content-centerから 中央列 （col-*）

ブートストラップ4の垂直方向の中央揃え
ブートストラップ4の全画面中央に配置された形式
ブートストラップ4センター入力グループ
ブートストラップ4横+縦中央フルスクリーン

181
Zim

フォームを中央に配置するために何かが必要です。しかし、あなたはあなたのhtmlとbodyに高さを指定しなかったので、それは単にコンテンツをラップするでしょう - そしてビューポートではありません。つまり、アイテムを中央に配置する場所がありませんでした。

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}
10
Bram Vanroy

これは私のために働く：

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>
9
karembadawy

flexboxがお手伝いします。 情報はこちら

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>
5
shades3002

ブートストラップには、テキストを中央揃えにするテキストセンターがあります。例えば

<div class="container text-center">

以下を変更します

<div class="row justify-content-center align-items-center">

次へ

<div class="row text-center">
1
ciaran kehoe

誰も私のために働いていません。しかし彼のものはそうした。

Bootstrap 4の.rowクラスがdisplay：flexになったので、縦方向に中央揃えにするには、任意の列で新しいalign-self-center flexboxユーティリティを使用するだけです。

<div class=”row”>
   <div class=”col-6 align-self-center”>
      <div class=”card card-block”>
      Center
      </div>
   </div>
   <div class=”col-6">
      <div class=”card card-inverse card-danger”>
      Taller
      </div>
   </div>
</div>

私はそれについて学びました https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

0
Paulo Pedroso