CODEWITHSUNDEEP
cssimagebootstrap-modal
Elnoor
Elnoor

Reputation: 3762

Vertically centering dynamically loaded image inside bootstrap modal

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 enter image description here

But i would like to make it look like this. enter image description here

If anyone could help that would be great.

Upvotes: 0

Views: 999

Answers (1)

tao
tao

Reputation: 90188

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.

Upvotes: 1

Related Questions