BinaryDevelop
  1. ホーム
  2. css

[解決済み] Bootstrap 4のVertical Align Center [重複]について

2022-03-21 20:23:07

質問

Bootstrap 4 を使って、コンテナをページの中央に配置しようとしています。今のところうまくいっていません。何かお手伝いいただけると幸いです。

で構築しました。 コードペン(Codepen.io) というわけで、皆さんもぜひ試してみてください。 

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

解決方法は？

重要! 垂直方向の中心は、相対的なものです。 高さ の親

センタリングしようとする要素の親要素に、定義された 高さ , なし の垂直方向のセンタリングソリューションが機能します。

さて、縦方向のセンタリングですが...

Bootstrap 5 (2021年更新)

Bootstrap 5はまだ フレックスボックス ベースのため、垂直方向の中央揃えはBootstrap 4と同じように動作します。例えば align-items-center , justify-content-center または自動マージンをフレックスボックスの親に使用することができます ( row または d-flex ).

  • 使用 align-items-center フレックスボックスの行の親に ( row または d-flex )
  • 使用 justify-content-center をフレックスボックスのカラムの親に設定します ( d-flex flex-column )
  • 使用 my-auto フレックスボックスの親に

Bootstrap 5における垂直方向の中心

ブートストラップ4

を使用すると、新しい flexbox & size utilities を使用することで container フルハイトと display: flex . これらのオプションは は、余分なCSSを必要としません。 (ただし コンテナ(html,body)の高さは100%である必要があります。 ).

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

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

https://codeply.com/go/fFqaDe5Oey

オプション2 align-items-center フレックスボックスの親に ( .row は 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://codeply.com/go/BumdFnmLuk

オプション3 justify-content-center フレックスボックスの親に ( .card は 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://codeply.com/go/3gySSEe7nd

Bootstrap 4の垂直方向へのセンタリングに関する詳細情報

Bootstrap4では、フレックスボックスと その他のユーティリティ を使用することで、垂直方向に対する様々なアプローチが可能です。 の整列を行います。 http://www.codeply.com/go/WG15ZWC4lf

1 - 自動余白を利用した垂直方向の中央揃え。

垂直方向の中央揃えには、もう一つの方法として my-auto . これは、そのコンテナの中で要素を中央に配置します。例えば h-100 は行の高さを最大にし my-auto は垂直方向にセンタリングされます。 col-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 - ディスプレイユーティリティを使用した垂直方向の中心。

Bootstrap4では ディスプレイユーティリティ に使用することができます。 display:table , display:table-cell , display:inline などがあります。これらは 垂直アライメントユーティル インライン、インラインブロック、テーブルのセル要素を整列させることができます。 

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

ディスプレイユーティリティを使用した垂直方向の中央揃え デモ

その他の例
の縦中央の画像 <div>
.container内の.rowを垂直方向に中央化
垂直方向の中央と下 <div>
垂直方向の中央の子を親の中に入れる
縦型センターフルスクリーンジャンボトロン

重要! 身長って言ったっけ？

垂直方向のセンタリングは相対的なものであることを忘れないでください。 親の高さ 要素を使用します。ページ全体を中央寄せにしたい場合、ほとんどの場合、このCSSになるはずです... 

body,html {
  height: 100%;
}

または min-height: 100vh ( min-vh-100 をBootstrap 4.1+で）親/コンテナ上で使用することができます。子要素を親の内側にセンタリングしたい場合。親は、定義された 高さ .

こちらもご覧ください。
bootstrap 4 における垂直方向のアラインメント
Bootstrap センターの垂直・水平アライメント

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します