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;
}

对象标签上的

但是效果不好。

这是我的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，显示行为与小图像和较大图像之间的比较。

有什么想法吗？

由于

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;
 }

祝你有愉快的一天！

Answer 2

Valentin Darricau 你好试试这个 Fiddle here ，看看这是否符合您的要求使小图像垂直对齐。

这是我添加的课程。

.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

类的模态体的图像

当图像很小时，在引导模态中垂直对齐中心

2 个答案: