当图像较小时，如何在Bootstrap模态框中垂直居中对齐

Question

我正在使用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;
}

关于 object 标签，但效果不太好。

这是我的 CSS（object 表示图像）：

 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/[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展示了小图和大图之间的行为比较。

有什么想法吗？

谢谢

- VDarricau

Answer 1

你应该尝试：

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

祝您有美好的一天！

- Diane Duquesne

---

它似乎可以工作，但是防止模态框变得大于600像素。这不完全是我要找的。 - VDarricau

Answer 2

Valentin Darricau 你好。
尝试使用这里的Fiddle，看看是否符合你的需求。
让小图像在垂直居中时，可以使用以下类。

我添加的类如下。

.centerthis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

在这里使用它...

<div class="modal-body">
    <object class="centerthis" data="https://wasin.io/wp-content/uploads/2015/05/showimage.png" type="image/png">
    </object>
</div>

新增

这是带有模态框的原始代码图片。

这是使用centerthis类的模态框主体图片。

- AngularJR

---

这个类已经在问题中了。我尝试过这个，但是在大图像中它不起作用。事实上，我事先不知道图像的大小，这是棘手的部分。 - VDarricau

你好，我已经在我的帖子中添加了内容。这应该适用于任何模态框并且可以居中显示任何大小的图像。当我第一次阅读您的帖子时，它听起来像您只是遇到了小选项的问题。再看看那个fiddle，并尝试使用不同大小的图像，看看它是否适用于您。 - AngularJR

我不认为你理解我需要什么。但无论如何，我选择另一种方式来实现它。但还是谢谢你的尝试。 - VDarricau