☰

Bootstrap 3 モーダル垂直位置の中央 質問する

tag-icon • tag-icon css twitter-bootstrap modal-dialog center
Bootstrap 3 モーダル垂直位置の中央 質問する

これは2つの部分からなる質問です:

  1. モーダルの正確な高さがわからない場合、どのようにしてモーダルを中央に垂直に配置することができますか?

  2. モーダルが画面の高さを超える場合にのみ、モーダルを中央に配置し、モーダル本体に overflow:auto を設定することは可能ですか?

私はこれを使用しようとしました:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

これにより、コンテンツが垂直画面サイズよりもはるかに大きい場合に、必要な結果が得られますが、小さなモーダル コンテンツの場合、ほとんど使用できません。

ベストアンサー1

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

そして、.fadeクラスを少し調整して、ウィンドウの中央ではなく上部の境界線から外れるようにします。

おすすめ記事