Question

我制作了一个 4 幻灯片的文本动画，从右到左，但我似乎无法理解如何修复此宽度和高度错误。我希望文本始终位于幻灯片的中间，但如果您展开或收缩浏览器，它就会丢失。

宽度和高度显然有问题，但我似乎找不到合适的比例，无论您如何操纵浏览器窗口大小，始终将文本保持在中间。

代码如下：

.frame{
  border: 2px solid red;
  height: 80px;
  overflow: hidden;
}
.slidewrapper{
  border: 2px solid blue;
  width: 400%;
  height: 100%;
  animation: slideshow 24s;
  animation-iteration-count:infinite;
  position: relative;
   left: 30px;
   top: -150px;
}
.slide{
  text-align: center;
  height: 100%;
  width: 25%;
  float: right;
  padding-top: 4%;
  font-size: 13px;
}
.p1{
  background-color: hotpink;
}
.p2{
  background-color: blue;
}
.p3{
  background-color: teal;
}
.p4{
  background-color: green;
}
@keyframes slideshow {
  0%{margin-left: -10%  }
  25%{margin-left: -100% }
  50%{ margin-left: -200% }
  75%{margin-left: -300%  }
  }
}

<div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">
        Free shipping and handling on order over $50. CODE:<i>FREE50</i>
      </div>
      
      <div class='slide p2'>  <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p3'> <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p4'><p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
    </div>
 </div>

Answer 1

您需要指定一个固定的 padding-top 而不是百分比，其中填充由单位而不是屏幕尺寸决定：

    .frame{
      border: 2px solid red;
      height: 80px;
      overflow: hidden;
    }
    .slidewrapper{
      border: 2px solid blue;
      width: 400%;
      height: 100%;
      animation: slideshow 24s;
      animation-iteration-count:infinite;
      position: relative;
       left: 30px;
       top: -150px;
    }
    .slide{
      text-align: center;
      height: 100%;
      width: 25%;
      float: right;
      padding-top: 150px;
      font-size: 13px;
    }
    .p1{
    background-color: hotpink;
  }
    .p2{
    background-color: blue;
    }
    .p3{
    background-color: teal;
    }
    .p4{
    background-color: green;
    }
    @keyframes slideshow {
      0%{margin-left: -10%  }
      25%{margin-left: -100% }
      50%{ margin-left: -200% }
      75%{margin-left: -300%  }
      }
    }

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">Free shipping and handling on order over $50. CODE:
        <i>FREE50</i></div>
      <div class='slide p2'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
      <div class='slide p3'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
      <div class='slide p4'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
    </div>
  </div>

</body>

</html>

Answer 2

试试：

    .slidewrapper{
      border: 2px solid blue;
      width: 400%;
      height: 100%;
      animation: slideshow 24s;
      animation-iteration-count:infinite;
    }
    .slide{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 25%;
      float: right;
      font-size: 13px;
    }

在这里为我工作https://codepen.io/Rortan134/pen/bGWLjyX

Answer 3

我会为此使用 flex。我已经稍微精简了您的代码并添加了 flex。您需要调整幻灯片高度，以便为您的内容留出足够的空间。

我没有添加任何填充，因此请确保为幻灯片添加通用填充（不仅仅是顶部填充），以便在文本碰到幻灯片容器的边缘时看起来不错。

注意 flex-direction 列，它使您的文本元素垂直堆叠，就像您希望的那样，即使幻灯片应用了 flex。

如果你想把所有的文字都放在同一行，把那行css去掉就行了。

.frame{
  border: 2px solid red;
  height: 140px;
  overflow: hidden;
}
.slidewrapper{
  display: flex;
  width: 400%;
  height: 100%;
  animation: slideshow 24s;
  animation-iteration-count:infinite;
}
.slide{
  font-size: 13px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.p1{
  background-color: hotpink;
}
.p2{
  background-color: blue;
}
.p3{
  background-color: teal;
}
.p4{
  background-color: green;
}
@keyframes slideshow {
  0%{margin-left: -10%  }
  25%{margin-left: -100% }
  50%{ margin-left: -200% }
  75%{margin-left: -300%  }
  }
}

<div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">
        Free shipping and handling on order over $50. CODE:<i>FREE50</i>
      </div>
      
      <div class='slide p2'>  <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p3'> <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p4'><p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
    </div>
 </div>

动画幻灯片CSS对齐问题

3 个答案: