首页 文章

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

提问于
浏览
3

我正在使用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 回答

  • 0

    你应该试试 :

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

    祝你今天愉快 !

  • 1

    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>
    

    Added

    这是带有模态的原始代码的图像 .
    enter image description here

    这是使用 centerthis 类的模态体的图像

    enter image description here

相关问题