1. 程式人生 > 其它 >python測試開發django-156.bootbox 垂直居中(上下居中)

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