twitter-bootstrap – Bootstrap 3模态垂直位置中心
发布时间:2020-12-17 23:19:18 所属栏目:安全 来源:网络整理
导读:这是一个两部分的问题: 当你不知道模态的确切高度时,如何将模态垂直放在中心? 是否可能有模态中心和溢出:auto在模态体,但只有模态超过屏幕高度吗? 我已经尝试使用这: .modal-dialog { height: 80% !important; padding-top:10%;}.modal-content { hei
这是一个两部分的问题:
>当你不知道模态的确切高度时,如何将模态垂直放在中心? 我已经尝试使用这: .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } 这给了我所需要的结果,当内容远大于垂直屏幕尺寸,但对于小模态内容,它是非常不可用。 解决方法.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类,以确保它出现在窗口的顶部边框之外,而不是中心 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |