我怎样才能垂直居中这个模态窗口,而不管显示的内容的大小。在我的网页,我显示一个图像作为一个模态窗口,我想它显示在屏幕的中心。我可以水平对齐,但我不能让它垂直合作。有没有这样做的想法/例子?
我在我的页面中使用了这个例子:modal window demo plunker
但我的模态窗口的实际内容看起来像这样:
<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>
我应该在bootstrap.min.css
或ui-bootstrap-tpls-0.13.0.js
中进行更改,还是在我自己的工作表中使用我的样式来实现这一点的最佳方法。
非常感谢你的时间。让我知道如果你需要更多的信息或如果我不清楚。
1条答案
按热度按时间lymgl2op1#
我强烈不同意1Bladesforhire的回答,因为当
modal
容器的顶部高于视口高度时,它就变得无法访问。这是使用absolute
垂直居中方法将比父级高的子级居中时的常见问题。我首选的垂直居中Bootstrap模型的方法是
当垂直居中时,当小于视口高度时,
.modal-content
仍然是完全可访问的(即使高度为300vh
):