模态不会居中对齐

Question

我的模式似乎不适合页面中央，我在 bootstrap 4 atm 运行，有人可以试试我需要做什么吗？

                <div class="modal-dialog modal-dialog-centered">
    
                        <div class="modal-dialog modal-lg">
                
                            <div class="Modal-header">
                    
                                <button type="button" class="btn-close btn-plain-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    
                                    </div>
                    
                                    <div class="modal-content">
                
                                        <img src="<?=$base_url?>_images/animation.gif" alt="Animated Gif">
                
                                    </div>
                        
                                </div>
                    
                            </div>
                
                        </div>
            
                    </div>
    
                </section>

Answer 1

你的class顺序错了，而且你用了两次class modal-dialog。

用这个替换你的模态代码：

<div class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <img src="<?=$base_url?>_images/animation.gif" alt="Animated Gif">
      </div>
    </div>
  </div>
</div>

从 Bootstrap 4.6 Modal

复制和编辑

模态不会居中对齐

Modal won't center align

html

modal-dialog

dreamweaver