Vertically centering dynamically loaded image inside bootstrap modal

Question

How can i vertically center dynamically loaded image inside a div inside bootstrap modal? My code is like

    <div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-vert-align-helper">
        <div class="modal-dialog modal-lg modal-vert-align-center" role="document">
            <div class="modal-content" style="border-radius: 0;">
                <div class="modal-body">

        <div class="row no-margin">
          <div class="col-md-8 left" >
            <center id="post-center" style="margin-top:0;">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg" id="full-img">
            </center>
          </div>
          <div class="col-md-4 right"></div>
        </div>

                </div>
            </div>
        </div>
    </div>
</div>

css

.modal-body{
      min-height: 270px;
}
.left{

}
.right{
     height:650px;
     border:2px solid blue
}
#post-center{
    background:grey;
   height:100%;
   width:100%;
}

#full-img{

}

I have created a fiddle here. Right now it looks like this

But i would like to make it look like this.

If anyone could help that would be great.

Possible duplicate of [Bootstrap modal dialog center image in body](https://stackoverflow.com/questions/29334416/bootstrap-modal-dialog-center-image-in-body) — Jonathan, Jun 17 '17 at 23:39
@jNg have seen and checked that, didn't work as my images can have dynamic dimensions — Elnoor, Jun 17 '17 at 23:40
use display table and display table-cell. check this https://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height — , Jun 18 '17 at 00:20
checked that one too, but couldn't make it work with table/table-cell @buxbeatz — Elnoor, Jun 18 '17 at 00:24

score 1 · Accepted Answer · edited Sep 29 '17 at 00:21

From your existing code and question it's hard to figure out what you want to achieve at different viewport widths, as you probably trimmed down your example too much, but I can only assume this helps:

.right {
  border: 2px solid blue;
  box-sizing: border-box;
  height: 100%;
}

.gray-bg {
  background: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media(max-height: 991px) {
  .flex-me .gray-bg {
    min-height: 80vh;
  }
}

@media (min-width: 992px) {
  .flex-me {
    display: flex;
  }
  .gray-bg {
    width: calc(100% + 15px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-vert-align-helper">
    <div class="modal-dialog modal-lg modal-vert-align-center" role="document">
      <div class="modal-content" style="border-radius: 0;">
        <div class="modal-body">

          <div class="row no-margin flex-me">
            <div class="col-md-8">
              <div class="text-center gray-bg">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg"
                id="full-img">
              </div>
            </div>
            <div class="col-md-4">
              <div class="right"></div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>
</div>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post-expand-modal">
  Launch Modal
</button>

Here's the fiddle.

Thanks Andrei, that indeed helped to make it centered. And yes my code was trimmed to make it short and simple to show. The documentation also looks good. Thank you! — Elnoor, Jun 18 '17 at 00:23

Vertically centering dynamically loaded image inside bootstrap modal

1 Answers1