[英]How to align Modal form in center using css?
This is my modal form and I want to show this modal in center , I was trying with some css but it didnt helped , any sort of help is appreciated .这是我的模态形式,我想在中心显示这个模态,我尝试使用一些 css 但它没有帮助,任何形式的帮助表示赞赏。 This is my code
这是我的代码
<div class="modal fade" id="success" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background: #1ab394;
border-top-left-radius: 5px;
border-top-right-radius: 5px;">
<button type="button" class="close" data-dismiss="modal"
style="opacity:1;color:#fff;">×</button>
<h4 class="modal-title text-center"><img
src="https://lh3.googleusercontent.com/-Zxh4srAEtU0/Wp0cZV-PJuI/AAAAAAAAD4E/En5x5c53s44jzvG8M0sSyFZXoRhGXfBzwCL0BGAYYCw/h100/2018-03-05.png"
alt=""></h4>
</div>
<div class="modal-body">
<p style="text-align:center;color:#1ab394;font-size:24px;font-weight:500;">Cheers! Payment
Successful!</p>
<p style="color:#555555;">Transaction ID: <strong
style="font-weight:500;font-size:16px;color: #222222;">152458258752515</strong><br>Payment
amount: <strong
style="font-weight:500;font-size:16px;color: #222222;">Rs.35000</strong><br>The above rent shall
credited to your landlord's bank account in<strong
style="font-weight:500;font-size:15px;color: #222222;"> 3 working days</strong></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<
/div>
css what I was trying was something like this :-我正在尝试的 css 是这样的:-
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
If you want to center it vertically, then you can make it simply by flexbox.如果你想垂直居中,那么你可以简单地通过 flexbox 来制作它。 So add additional styles in your document:
因此,在您的文档中添加其他样式:
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.