前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >python测试开发django-156.bootbox 垂直居中(上下居中)

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

作者头像
上海-悠悠
发布2021-10-20 11:38:20
9200
发布2021-10-20 11:38:20
举报

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对象因为没有宽度,所以不占用空间,从达到了垂直居中的目的。

代码语言:javascript
复制
    <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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 从零开始学自动化测试 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • css设置垂直居中
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档