Question

附加的代码包含一个带有<p>的动画CSS框。它的工作原理但问题是，它为什么不垂直对齐？我将需要使用flex函数：“align-items = center”使其对齐。

.LoaderBox {
  width: 100%;
  border: 1px solid rgba(255, 0, 0, 1.00);
  display: flex;
  justify-content: center;
}

.LoaderBox>p {
  color: rgba(106, 106, 106, 1.00);
  font-size: 15px;
  margin-left: 20px;
  display: block;
}

.LoaderBox_spinner {
  width: 20px;
  height: 20px;
  background-color: #333;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
  display: block;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px)
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg)
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

<div class="LoaderBox">
  <div class="LoaderBox_spinner"></div>
  <p>Verifying</p>
</div>

Answer 1

只需将align-items: center添加到您的flex-container .LoaderBox。

默认情况下，所有项目都会被拉伸（align-items: stretch）。

p默认情况下具有相等的垂直边距（margin-top和margin-bottom），而div则没有。p。所以在这种情况下.LoaderBox { width: 100%; border: 1px solid rgba(255, 0, 0, 1.00); display: flex; align-items: center; /* new */ justify-content: center; } .LoaderBox>p { color: rgba(106, 106, 106, 1.00); font-size: 15px; margin-left: 20px; display: block; } .LoaderBox_spinner { width: 20px; height: 20px; background-color: #333; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; display: block; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }确定了flex-container的高度。而且看起来它也是垂直居中的。

演示：

<div class="LoaderBox">
  <div class="LoaderBox_spinner"></div>
  <p>Verifying</p>
</div>

DllPluginTester.exe

Answer 2

.LoaderBox {
    width: 100%;
    border: 1px solid rgba(255, 0, 0, 1.00);
    display: flex;
    justify-content: center;
	padding:20px;
	box-sizing:border-box;
  }
  
  .LoaderBox>p {
    color: rgba(106, 106, 106, 1.00);
    font-size: 15px;
    display: block;
	padding:0px;
	margin:0px;
	margin-left:20px;
  }
  
  .LoaderBox_spinner {
    width: 20px;
    height: 20px;
    background-color: #333;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    display: block;
	float:left;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% {
      -webkit-transform: perspective(120px)
    }
    50% {
      -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
      -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
  }
  
  @keyframes sk-rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
  
  p{ float:left;}

<div class="LoaderBox">
    <div class="LoaderBox_spinner"></div>
    <p>Verifying</p>

  </div>

为什么内容不在中间？

2 个答案: