我正在使用bootstrap模式来显示不同大小的图像 . 而且我希望模态体具有最小的宽度和高度(实际为600 * 400) . 因此,当图像较大时,它会扩展并且效果很好,但是当图像的高度低于400px时,图像会在顶部对齐(垂直) . 所以我想在模态体的中间垂直对齐 .
我试过了:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
和
.image-center {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
在对象标签上,但不能很好地工作 .
这是我的css(对象代表图像):
object {
width:auto;
max-width: 100%;
max-height: 70vh;
width: auto\9; /* ie8 */
}
.modal-header {
text-align: left;
}
@media (min-width: 768px){
.modal-dialog {
max-width: 95%;
}
.modal-body{
min-width: 600px;
min-height: 400px;
}
}
.modal-dialog {
width: auto;
text-align: center;
}
.modal-content{
display:inline-block;
text-align: center;
}
和我的html为一个模态:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<object data="https://og.github.com/mark/github-mark@1200x630.png" type="image/png">
</object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这里还有一个plunker,显示了小图像行为与较大图像之间的比较 .
任何的想法?
谢谢
2 回答
你应该试试 :
祝你今天愉快 !
Valentin Darricau 你好 .
试试这个 Fiddle here ,看看这是否适用于你想要的方式 .
使小图像垂直对齐 .
这是我添加的课程 .
并在这里使用它......
Added
这是带有模态的原始代码的图像 .
这是使用 centerthis 类的模态体的图像