bootstrap的弹窗剧中_bootstrap弹窗居中处理
时间: 2023-11-26 16:05:59 浏览: 34
要使Bootstrap的弹窗居中显示,你可以使用以下CSS:
```
.modal {
text-align: center;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
```
这段CSS将使用 `text-align` 属性将模态框标题和内容水平居中对齐。然后,使用 `:before` 伪元素创建一个占位符,并使用 `vertical-align` 将其垂直居中对齐。最后,使用 `display: inline-block` 和 `vertical-align` 将模态框本身垂直居中对齐。
请注意,此CSS样式仅适用于Bootstrap 3。如果你使用的是Bootstrap 4,则需要适当调整它以使其有效。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![sb3](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)