Vertically align center in a bootstrap modal when the image is small

问题

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.

I have tried:

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

and

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

on the object tag but doesn't work well.

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

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/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>

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

Any idea?

Thanks

回答1:

You should try :

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

Have a nice day !

回答2:

Valentin Darricau Hi there.
Try this Fiddle here, to see if this works for how you want.
To have the small image align in the center vertically.

This is the class I added.

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

And used it here...

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

Added

Here is a image of your original code with the modal.

Here is a image of the modal body using the class of centerthis

来源：https://stackoverflow.com/questions/32594968/vertically-align-center-in-a-bootstrap-modal-when-the-image-is-small

标签

css

twitter-bootstrap

bootstrap-modal