当图像较小时，在引导程序模态中垂直对齐中心 [英] Vertically align center in a bootstrap modal when the image is small

问题描述

我正在使用引导程序模式来显示不同大小的图像.我希望模态主体的宽度和高度最小(实际上为600 * 400).因此，当图像较大时，它可以扩展并正常工作，但是当图像的高度低于400px时，图像将在顶部(垂直)对齐.因此，我想在模态主体的中间垂直对齐它.

I am using a bootstrap modal to show images of different sizes. And I would like that the modal body has minimal width and height (600*400 actually). So when an image is bigger it expands and works well, but when the image has a height inferior to 400px, the image is aligned (vertically) at the top. So I would like to align it vertically in the middle of the modal body.

我尝试过:

.vcenter {
     display: inline-block;
     vertical-align: middle;
     float: none;
}

和

.image-center {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

在对象标签上，但是效果不佳.

on the object tag but doesn't work well.

这是我的css(对象代表图像):

Here is my css (the object represent the image):

 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的一种模式:

and my html for one modal:

<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/[e-mail]" 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 ，显示了小图像行为与一个更大的.

Here is also a plunker showing the comparison between the behavior with the small image and a bigger one.

有什么主意吗?

谢谢

推荐答案

您应该尝试:

object  {
    width:auto;
    max-width: 100%;
    width: auto\9; /* ie8 */
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 70vh;
 }

祝您有美好的一天！

这篇关于当图像较小时，在引导程序模态中垂直对齐中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！