ブートストラップ4の垂直方向の中央揃え


322

ブートストラップ4を使用して、ページの中央にコンテナーを配置しようとしています。これまでのところ、うまくいきませんでした。任意の助けいただければ幸いです。

私はそれをCodepen.io構築したので、皆さんはそれを試してみて、アイデアから私が何をしているのかを教えてください...

回答:


675

重要! 垂直方向の中心は、親の高さを基準にしています

あなたが中央にしようとしている要素の親が何も定義されている場合は 、高さがどれも垂直センタリングソリューションのは動作しません!

次に、Bootstrap 4の垂直方向の中央揃えに...

あなたは、新しい使用することができますフレキシボックス&サイズのユーティリティを作るためにcontainerフルハイトをしてdisplay: flex。これらのオプションでは、追加のCSSは必要ありません(ただし、コンテナー高さ(つまり、html、body)は100%でなければなりません)。

align-self-centerフレックスボックスの子のオプション1

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

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

align-items-centerフレックスボックスの親のオプション2.rowis display:flex; flex-direction:row

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

ここに画像の説明を入力してください

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

justify-content-centerフレックスボックスの親のオプション3.cardis display:flex;flex-direction:column

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd


Bootstrap 4の垂直方向の中央揃えの詳細

Bootstrap 4がフレックスボックスやその他のユーティリティを提供するようになったため、垂直方向の配置には多くのアプローチがあります。http://www.codeply.com/go/WG15ZWC4lf

1-自動マージンを使用した垂直中心:

垂直方向に中央揃えするもう1つの方法は、を使用することmy-autoです。これにより、要素がそのコンテナの中央に配置されます。たとえばh-100、行を完全な高さにしてmy-autocol-sm-12列を垂直方向に中央揃えにします。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

自動マージンデモを使用した垂直中心

my-auto 垂直y軸のマージンを表し、以下と同等です。

margin-top: auto;
margin-bottom: auto;

2-Flexboxを備えた垂直中心:

垂直中央グリッド列

Bootstrap 4 .rowは現在、任意の列でdisplay:flex使用align-self-centerして垂直方向に中央揃えすることができます...

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

または、align-items-center全体.rowを使用してcol-*、行のすべてを垂直方向に中央揃えにします...

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

垂直中央の異なる高さの柱のデモ

このQ / Aを中心に見て、高さは同じに保つ


3-表示ユーティリティを使用した垂直中心:

ブートストラップ4が有する表示utilsのために使用することができるdisplay:tabledisplay:table-celldisplay:inline、など。これらを一緒に使用することができる垂直配向utilsの整列インラインに、インラインブロック又はテーブルセル要素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Display Utils デモを使用した垂直中心

その他の例
垂直方向の中央の画像<div>
垂直方向の中央の.containerの行
垂直方向の中央と垂直方向の中央の下部<div>
親の内側の子
垂直方向の中央全画面ジャンボトロン


重要! 私は身長に言及しましたか?

垂直方向の中央揃えは、親要素の高さを基準にしていることに注意してください。ページ全体を中央に配置したい場合は、ほとんどの場合、これがCSSになります...

body,html {
  height: 100%;
}

または、親/コンテナでmin-height: 100vhmin-vh-100Bootstrap 4.1以降)を使用します。子要素を親の中央に配置する場合。親には高さが定義れている必要があります。

参照:
ブートストラップ4の垂直方向の配置ブート
ストラップ4中央の垂直方向と水平方向の配置


1
ナビゲーションバーのあるページで上記を使用すると、スクロールバーが表示されます。ナビゲーションバーの下に100%の高さを追加し、それを横切って中央揃えにしていると思います。どうすれば修正できますか?
newdimension 2017

フレックスボックスを使用して、複数の行を中央に揃えようとしています。すべてのボタンを中央に揃えたい。 codeply.com/go/5abdqC33cU
Coder

ここに示す方法に基づいて、現在3つの中央揃えの方法を示すコードペンを準備しました:codepen.io/yigith/pen/oNjmGEL
KodFun

23

親コンテナーをflexにして以下を追加することにより、コンテナーを垂直方向に配置できますalign-items:center

body {
  display:flex;
  align-items:center;
}

更新されたペン


1
ああ、笑、私は説明のリンクを逃しました...あなたも追加しましたhtml, body {height:100%}...それを追加するとうまくいきました!ありがとう!
カナンシート、2017

1
あなたの答えは尋ねられた方法で問題を解決し
ません

1
私は完全にあなたに同意しません、あなたはBootstrapクラスでそれをどのように行うかについての質問であったにもかかわらず回避策を提案します。
AlexNikonov

@AlexNikonov OPの質問のどこにも「ブートストラップのみを使用するように制限されている」と書かれていません。これは、ブートストラップクラスを使用せずに垂直方向に配置することを目的としてこのページにアクセスする可能性のある他の人々にとっての選択肢です。先に進んでください-ここには他にもたくさんの答えがあります。なぜこれに夢中になっているのかわかりません。これは、役立つアイデアだけのフォーラムです。問題の解決策を提供する回答に反対票を投じることによってこのサイトを台無しにするようなユーザーですが、あなたがそれを好まないという理由だけで
Pete

@AlexNikonovまた、元の未編集の投稿を読んだ場合(私が私の回答を追加したとき)、OPがブートストラップクラスを使用せずに中央に配置しようとしていたので、回答時にこれは正しかった
Pete

23

次のブートストラップ4クラスはこれを解決するのに役立ちました

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

1
ただし、divが垂直方向に中央揃えされませんでした。

あなたのCSSコードについて詳しく説明していただけますか?そのスニペットを共有すると、私はあなたが直面している問題を調査します。
Manoj

12

上記のどれもうまくいかなかったため、別の答えを追加します。

目標:ブートストラップ4フレックスボックスクラスを使用して、ページのdivを垂直方向および水平方向に揃えます。

ステップ1:最も外側のdivをの高さに設定します100vh。これにより、高さがビューポートの高さの100%に設定されます。これを行わないと、他に何も機能しません。の高さの設定100%は親を基準にしているため、親がビューポートの高さ全体ではない場合、何も機能しません。下の例では、ボディを100vhに設定しています。

ステップ2:コンテナーdivをd-flexクラスのあるflexboxコンテナーに設定します。

ステップ3:divをjustify-content-centerクラスの水平方向の中央に配置します。

ステップ4:divを垂直方向に中央揃え align-items-center

ステップ5:ページを実行し、垂直方向と水平方向に中央揃えされたdivを表示します。

中央のdiv自体(子div)に設定する必要のある特別なクラスはないことに注意してください

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

@AjayKumar、変更を共有しますか?
グレッグガム

おかげで、特に100vhトリックは私を助けてくれました。ブートストラップもvh-100このためのクラスを提供します。
スヴェンス


5

私はここからすべての答えを試しましたが、h-100vh-100の違いがここにあることがわかりましたここに 私の解決策があります:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

4

Bootstrap 4(ベータ版)では、を使用しますalign-middle垂直方向の配置についてはBootstrap 4のドキュメントを参照してください。

垂直配置 ユーティリティを使用して要素の配置を変更します。vertical-alignは、inlineinline-blockinline-table、および表のセル要素にのみ影響することに注意してください。

選択し.align-baseline.align-top.align-middle.align-bottom.align-text-bottom、および.align-text-top必要に応じて。


4
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

ここに画像の説明を入力してください


あなたの写真は、スタックオーバーフローが広告を始めたのを気にさせました:D
AlexNikonov

4
<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

この行は、マジックが起こるところで<div class="col-md-6 my-auto">my-auto列の内容を中心に説明します。これは、上記のコードサンプルのように、サイズが変化する画像があり、列のテキストを適切な位置に配置する必要がある場合に最適です。


3

私はBootstrapを使ってこのようにしました4.3.1

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

2
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

@AjayKumar flex-grow-1クラスをカードに追加すると、縮小できなくなります。
フレッド

1

垂直位置合わせこのブートストラップ4クラスを使用:

親:dテーブル

そして

子:d-table-cell&align-middle&text-center

例えば:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

親をサークルにしたい場合:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

次の2つのカスタムCSSクラスはどれですか。

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

最終的な使用法は、たとえば次のようになります。

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

0

100%の高さ、つまりh-100のflexboxコンテナー内にコンテンツを配置します。次に、justify-content-centerクラスを使用して、コンテンツを一元的に正当化します。

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>


-2

Bootstrap 4.1.3の場合:

これはcontainer > row > columnh1タイトルの隣にブートストラップバッジを中央に配置しようとしたときにうまくいきました。

うまくいったのはいくつかの簡単なCSSでした:

.my-valign-center {
  vertical-align: 50%;
}

または

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.