python測試開發django-156.bootbox 垂直居中(上下居中)
阿新 • • 發佈:2021-10-14
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