打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
python测试开发django-156.bootbox 垂直居中(上下居中)

bootbox 和 bootstrap modal模态框一样,默认在屏幕上方,左右居中显示。这是老外的习惯,我们一般喜欢上下居中,显示在屏幕中央。

css设置垂直居中

bootbox弹出的alert/confirm/prompt/dialog 和bootstrap modal模态框一样居中方式一样,默认在屏幕顶部水平居中

vertical-align:middle 的居中是基于 line-heigh t的,但 line-height:100%; 是相对于字体尺寸的,没法达到模态框居中效果。
在居中的对象后面加一个高度100%的 :after  伪类,两者都display:inline-block; vertical-align:middle;
也就相当于要居中的对象要和一个高度 100% 的对象中线对齐,:after对象因为没有宽度,所以不占用空间,从达到了垂直居中的目的。

<style>
/* 模态框居中样式 */
.modal{
text-align: center;
}
.modal:after {
display: inline-block;
height: 100%;
margin-left: -0.05em;
content: "";
vertical-align: middle;
}
.modal-dialog {
text-align: left;
display: inline-block;
vertical-align: middle;
}
</style>

居中后显示

bootstrap模态框(modal)垂直居中显示 参考https://www.cnblogs.com/yoyoketang/p/15250413.html

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
谁搞的?
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
李白4首送别诗,或殷切叮咛或遥望背影,真情跃然纸上,值得一读 神吐槽小王子2022-03-12 23:41 00 <p>孔子的《论语·学而篇》有名言:“有朋自远方来,不亦乐乎?”意思就是,有志同道合的朋友从远方来,
[ CSS ] line-height 与垂直居中!
CSS 垂直水平完全居中手册
弹窗居中实现方式
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服