Question

问题背景：

我有一个简单的视图，包括表单，按钮和一些文本。通过CSS，我可以水平和垂直居中页面的内容。

问题：

当用户点击按钮时，我将一个微调器.gif图像附加到div。我目前的问题是内容居中，附加图片会导致表单向上移动，这看起来不错。

代码笔示例：

请参阅我的codepen以了解该问题的演示

HTML：

 <div id="centerDiv" class="centered">
  <div class="col-lg-12 text-centered pushDown">
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
          <div class="row">
            <div class="col-lg-4 form-group text-center">
              A HomePage Item
            </div>

            <div class="col-lg-4 form-group text-center">
              A HomePage Item

            </div>

            <div class="col-lg-4 form-group text-center">

              A HomePage Item
            </div>

          </div>
          <div class="row">
            <div class="col-sm-12 form-group">
              <input type="submit" id="submitBtn" class="btn btn-success btn-block" value="Submit" />
            </div>
          </div>
          <div class="col-lg-12 text-center">
            <h4>This is homepage text</h4>
          </div>

          <div id="loadSpinner" class="text-center">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.pushDown {
  margin-top: 50px;
}

.spinnerSize {
  height: 60px;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 90%;
}

JavaScript＆amp; jQuery的：

    $('#submitBtn').click(function(){

          var spinner = '<img src="http://i870.photobucket.com/albums/ab267/GLaDOS_Chibi/Aperture_Science_by_crazychrislau93.gif" class="spinnerSize">';

          $('#loadSpinner').append(spinner);
     });

如何更改此设置，以便当按钮单击并且微调器附加它以使内容跳起来时内容仍然垂直/水平居中？

Answer 1

您可以为#loadSpinner提供相应的60px高度。这将摆脱“跳跃”：

#loadSpinner {  
  height:60px;
}

<强> Updated Codepen

水平＆amp;垂直居中的div＆＃39; jump＆＃39;添加图片时

1 个答案: