CSS：

Question

我一直在研究使用模板的Angular插件。我的目标是在“loader-wrap”部分添加更多padding-top，但是当我这样做时，第二个div称为“message-wrap”也会被修改并移动。我需要将padding-top: 100px添加到'loader-wrap'而不用向下移动'message-wrap'。我该如何解决这个问题？

基本结构HTML

<div id="page-wrap">
  <section id="loader-wrap"></section>
  <section id="message-wrap"></section>
</div>

CSS

gp-splash-loader #page-wrap {
  z-index: 999;
  position: fixed;
  background: #FFFFFF;
  width: 100%;
  height: 80%;
  top: 10%;
  margin: 0 auto;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  transition: opacity .5s;
  -webkit-backface-visibility: hidden;
}

@media ( max-height: 735px) {
  gp-splash-loader #page-wrap.opened{  
    height: 100%;
    top: 0;
  };
}

gp-splash-loader #page-wrap.closed {
  opacity: 0;
}

gp-splash-loader #page-wrap.opened {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

gp-splash-loader #loader-wrap {
  width: 30%;
  height: 70%;
  min-width: 300px;
  max-width: 600px;
  margin: 10px auto;
  padding-top: 50px; 
}
gp-splash-loader #message-wrap {
  min-width: 1px;
  margin: 0 auto;
  height: 30%;
  min-height: 30%;
}

  gp-splash-loader #header-wrap {
    display: inline-block;
  }

签入codepen：http://codepen.io/gpincheiraa/pen/obdXEx

Answer 1

这是交易。您无法使用填充向下移动该加载器，否则会影响该消息。你需要一个不同的解决方案试试下面的html / css。

基本上我将其设置为使得加载器和消息位于将居中的div中。然后在那个居中的div里面，你可以随心所欲。但是加载器和消息将位于中间

如果你只想让加载器居中，那么你可以从'loader-message-box'div中取出消息，并对它应用不同的样式。我会为这个解决方案做另一个小提琴

https://jsfiddle.net/ahmadabdul3/huf5zjkv/ - 消息和加载器都集中在

https://jsfiddle.net/ahmadabdul3/huf5zjkv/1/ - 此消息会将消息保留在底部

代码：

HTML

<div class='loader-message-box'>
  <div class='loader-message'>
    <div class='loader'>

    </div>
    <div class='message'>
      Message
    </div>
  </div>
  <div class='vertical-mid-hack'>
  </div>
</div>

CSS

body, html {
  height: 100%;
  margin: 0;
}
.loader-message-box {
  width: 100%;
  height: 100%;
  text-align: center;
}
.loader-message {
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
}
.vertical-mid-hack {
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
  height: 100%;
}
.loader {
  width: 100px;
  height: 100px;
  background-color: teal;
  border-radius: 100px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.message {
  background-color: white;
  border-radius: 3px;
  font-family: arial;
  padding: 20px 0;
  margin: 0 auto;
  margin-top: 20px: 
}

Answer 2

我从CSS中删除了gp-splash-loader的任何实例。我不知道但我知道gp-splash-loader不是有效的选择器。除此之外，以下CSS是重要的部分：

CSS：

    body {
      margin: 0;
      padding: 0;
      background: slateblue;
      text-align: center;
      top: 0;
      position: relative;
    }
    #loader-wrap {
      width: 30%;
      height: 70%;
      min-width: 300px;
      max-width: 600px;
      margin: 10px auto;
      padding-top: 100px;
      position: relative;
      z-index: 10;
    }
   #message-wrap {
      min-width: 1px;
      margin: 0 auto;
      height: 30%;
      min-height: 30%;
      position: relative;
      z-index: 11;
    }

添加了50px padding-top
同时定位relative（以及身体）
确保使用不同的z-index

http://codepen.io/zer00ne/full/qbYMMQ/

顺便说一句，如果您想要向上或向下调整任何一部分，请添加top，如果您希望该部分上升，则添加负值，反之亦然。恩。

  #message-wrap {
      min-width: 1px;
      margin: 0 auto;
      height: 30%;
      min-height: 30%;
      position: relative;
      z-index: 11;
      top: -100px;
  }

这应该使#message-wrap高出100px。

CSS padding top div修改下面的div

2 个答案:

CSS：