ブートストラップコンテナは垂直方向に中心合わせされています

マイページは、ナビゲーションバーと2つのパネルを含むコンテナで構成されています。ブートストラップコンテナは垂直方向に中心合わせされています

私のコンテナを垂直方向にセンターしたい。 navbarは上にとどまっていなければなりません。

が、私はこれを達成したい：

は今、私はこれを持っている。ここ

は私のコードです：

HTML

<body> 

    <nav class="navbar transparent navbar-static-top"> 

    <div class="navbar-header"> 
     <p>Welcome</p> 
    </div> 

    </nav> 

    <div class="container d-flex h-100"> 

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

     <!-- 1st panel --> 
     <div class="col-md-4 mb-4" id="panel"> 

     <div class="panel panel-default1"> 

      <div class="panel-body"> 

      <p>Blablabla</p> 

      </div> 
      <!-- panel body --> 
     </div> 
     <!-- panel-default1--> 
     </div> 
     <!-- col md 4 --> 

     <!-- 2nd panel --> 

     <div class="col-md-8 col-md-8" id="panel2"> 

     <div class="panel panel-default2"> 

      <div class="panel-body"> 

      <p>Blablabla</p> 

      </div> 
      <!-- panel-body --> 

     </div> 
     <!-- panel-default2--> 

     </div> 
     <!-- col md 8 --> 

    </div> 
    <!-- row --> 

    </div> 
    <!-- container--> 

</body>

CSS

html { 
    overflow: hidden; 
    height: 100%; 
} 

body { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

.panel-default1 { 
    padding-top: 8px; 
    border-radius: 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
    height: 400px; 
    width: 100%; 
    overflow: hidden; 
    margin: 0 auto; 
    position: relative; 
} 

.panel-default2 { 
    padding-top: 10px; 
    padding-right: -15px; 
    border-radius: 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
    height: 400px; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
}

私はコンテナ縦中央に成功していません。

清潔で実用的な解決方法をお伝えください。

出典

2017-11-13 mattvent

私はこれまでずっと同様のことをやってみましたが、CSSストリップのクラスより簡単なCSSで解決するのが簡単でした。CSS制限があったとしても（<body>は100％十分な内容で満たしている）。

あなたの.container要素だけがコンテンツを中央に置くように、私は自分のスタイルシートを調整しています。

html, body, .container { 
    height: 100%; 
    overflow-x: hidden; 
} 

body, .container { 
    display: flex; 
} 

.container { 
    align-items: center; 
}

出典

2017-11-13 11:53:15 Tiramonium

あなたはこれらのクラスを使用することができます体d-flexへ

、flex-column
スニペットに適用されるコンテナm-auto

CSS、すでにbodyタグにスニペットによって作成されたもので、目的税とそれ

/* these below can be applied through classes .d-flex,flex-column,m-auto , .. */ 
 
body { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100vh; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
} 
 
/* end update */ 
 

 
/* removed a few things that did not seem useful, add back what you really need/
 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.panel-default1 { 
 
    padding: 8px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 100px; 
 
} 
 

 
.panel-default2 { 
 
    padding: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 100px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 

 

 
<nav class="navbar transparent navbar-static-top"> 
 

 
    <div class="navbar-header"> 
 
    <p>Welcome</p> 
 
    </div> 
 

 
</nav> 
 

 
<div class="container d-flex h-100"> 
 

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

 
    <!-- 1st panel --> 
 
    <div class="col-md-4 mb-4" id="panel"> 
 

 
     <div class="panel panel-default1"> 
 

 
     <div class="panel-body"> 
 

 
      <p>Blablabla</p> 
 

 
     </div> 
 
     <!-- panel body --> 
 
     </div> 
 
     <!-- panel-default1--> 
 
    </div> 
 
    <!-- col md 4 --> 
 

 
    <!-- 2nd panel --> 
 

 
    <div class="col-md-8 col-md-8" id="panel2"> 
 

 
     <div class="panel panel-default2"> 
 

 
     <div class="panel-body"> 
 

 
      <p>Blablabla</p> 
 

 
     </div> 
 
     <!-- panel-body --> 
 

 
     </div> 
 
     <!-- panel-default2--> 
 

 
    </div> 
 
    <!-- col md 8 --> 
 

 
    </div> 
 
    <!-- row --> 
 

 
</div> 
 
<!-- container-->

にクラスを追加

出典

2017-11-13 11:55:54

ブートストラップコンテナは垂直方向に中心合わせされています

答えて

関連する問題