Question

如何将动态加载的图像垂直居中在div内部的bootstrap模式中？我的代码就像

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

}

我创建了一个fiddle here。现在它看起来像这样

但我想让它看起来像这样。

如果有人能提供帮助那就太棒了。

Answer 1

从现有的代码和问题来看，很难弄清楚你想要在不同的视口宽度下实现什么，因为你可能会过多地削减你的例子，但我只能假设这有帮助：

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

这是the fiddle。

在引导模式内垂直居中动态加载的图像

1 个答案: