☰

Bootstrapでコンテナを垂直中央に配置するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment
Bootstrapでコンテナを垂直中央に配置するにはどうすればいいですか? 質問する

containerdiv をページのjumbotron中央に垂直に配置する方法を探しています。

は.jumbotron画面全体の高さと幅に合わせる必要があります。div の.container幅は で1025px、ページの中央 (垂直方向の中央) に配置する必要があります。

このページで、ジャンボトロンを画面の高さと幅に合わせて調整し、コンテナーをジャンボトロンの垂直中央に配置したいです。どうすれば実現できますか?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

ベストアンサー1

フレキシブルボックス方式

垂直方向の配置は、柔軟なボックスレイアウト現在、この方法は、幅広いInternet Explorer 8と9以外のウェブブラウザでは、ハックを使用する必要があります。ポリフィルまたは異なるアプローチIE8/9の場合。

以下では、古い flexbox 構文に関係なく、わずか3 行のテキストでそれを実行する方法を説明します。

注:垂直方向の配置を実現するには、変更するのではなく追加のクラスを使用する方が適切です。たとえば、クラス名を.jumbotron使用します。vertical-center

例はこちら （A鏡jsbin で。

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

重要な注意事項（デモで考慮） :

  1. またはプロパティのパーセンテージ値は親要素の に相対的であるため、親の を​​明示的に指定する必要があります。heightmin-heightheightheight

  2. 簡潔にするために、投稿されたスニペットではベンダー プレフィックス付き / 古い flexbox 構文は省略されていますが、オンラインの例には存在します。

  3. Firefox 9 (私がテストした)などの一部の古い Web ブラウザーでは、この場合、フレックス コンテナーは.vertical-center親内の使用可能なスペースを占有しないため、width次のようにプロパティを指定する必要がありますwidth: 100%。

  4. また、上記のように一部の Web ブラウザーでは、フレックス アイテム (.containerこの場合) が水平方向の中央に表示されないことがあります。 の適用された left/rightmarginはautoフレックス アイテムには影響しないようです。
    したがって、 で配置する必要がありますbox-pack / justify-content。

詳細および/または列の垂直方向の配置については、以下のトピックを参照してください。

従来のウェブブラウザの従来の方法

これは私がこの質問に答えた時に書いた古い回答です。この方法は議論されてきましたここまた、Internet Explorer 8 および 9 でも動作するはずです。簡単に説明します。

インラインフローでは、インラインレベル要素を中央に垂直に配置することができます。vertical-align: middle宣言。仕様からウィキペディア:

middle
ボックスの垂直方向の中点を、親ボックスのベースラインに親の x 高さの半分を加えた位置に揃えます。

.vertical-center親要素（この場合は要素）に明示的な がある場合height、子要素に親要素とまったく同じものを持たせることができればheight、親のベースラインを移動するフルハイトの子要素の中間点に配置すると、驚くべきことに、目的のインフロー子要素 ( ) が.container垂直方向の中央に揃えられます。

みんなで集まる

.vertical-centerそうは言っても、 by要素::beforeまたは疑似要素内にフルハイト要素を作成し、それと他の子である to のデフォルト タイプを::after変更することもできます。display.containerinline-block

次に、vertical-align: middle;インライン要素を垂直に揃えるために使用します。

どうぞ：

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

動作デモ。

また、極小画面で予期しない問題が発生するのを防ぐために、疑似要素の高さをautoまたはにリセットしたり、必要に応じて0そのdisplayタイプを に変更したりすることもできます。none

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

更新されたデモ

後もう一つ：

コンテナーの周囲にfooter/セクションがある場合は、その要素を適切に配置し( 、? は任意)、より高い値を追加して (確実性のため)、常に他の要素よりも上部に表示されるようにすることをお勧めします。headerrelativeabsolutez-index

おすすめ記事