html - 中心幻灯片文本 html

Question

我试图让幻灯片中的文本更靠近左边距，水平和垂直方向始终位于灰色区域的中间。此外，正如您可能会看到的那样，当文本消失时，x 滚动条会变大并且黑色空间会显示在您的右侧。有谁知道我似乎无法解决的问题是什么，非常感谢您的帮助。

同样在响应模式下，一个黑色区域出现在你的右边，我不确定它是否与幻灯片有关或其他错误？

感谢并期待您的回答

这是在线网站 http://vtwg.eu/ZMT/untitled3.html 你可以找到下面的代码 维多利亚

#gifphrases1 { 
    font-family: arial;
    background: grey;
    overflow: hidden;
    height: 180px;
    background-image: url("back.png");
    text-align: center;
    line-height: 30px;
    margin-left: 0px;
    }

    .item-1, 
    .item-2, 
    .item-3 {
    padding: 20px;
    position: absolute;
    display: block;
    width: 90%;
    font-size: 1.6em;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    text-align: center;


    }

    .item-1{
    animation-name: anim-1;

    }

    .item-2{
    animation-name: anim-2;
    }

    .item-3{
    animation-name: anim-3;
    }




    @keyframes anim-1 {
    0%, 8.3% { left: -100%; opacity: 0; }
    8.3%,25% { left: 25%; opacity: 1; }
    33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
    0%, 33.33% { left: -100%; opacity: 0; }
    41.63%, 58.29% { left: 25%; opacity: 1; }
    66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
    }

<center>
<div id="gifphrases1">

    <p class="item-1">If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge. <br>    <b>Marc Hogan - Pitchfork</b> </p>

    <p class="item-2">With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back. <br><b>Aerosyn-Lex Mestrovic - Visual Artist</b> </p>

    </p>

    <p class="item-3">From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!<br>            <b>Jeffrey Paradise - Poolside</b>         </p>
</div>
</center>

Answer 1

我认为您可以更新您的@keyframes。 将每个 @keyframes 的“左”值定义为“-100%”、“0%”和“100%”。

@keyframes anim-1 {
  0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 0%; opacity: 1; }
  33.33%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 0%; opacity: 1; }
  66.66%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-3 {
  0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 0%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

编辑#1:
margin-top: 0; 可以添加到每个“.item-#”以清空每个上方的空间。

编辑#2:
我发现将 position: relative 添加到“#gifphrases1”可以修复 overflow: hidden 规则的故障。
但是，您必须注意#gifphrases1 元素的高度。我在下面的示例中使用 height: 400px 将其设置为 400px(参见代码片段)。

编辑#3:
现在我想到了，将 position: relative 添加到“#gifphrases1”可以让你做出你想要的垂直居中!
将 top: 50% 规则添加到元素中——这会将它们放置在父元素的中间下方。 现在，添加 transform: translate(0, -50%) 将改变这一点，并将每个元素的中间放在父元素的中间。 完美居中! ←重要的是

#gifphrases1 { 
  font-family: arial;
  background: grey;
  position: relative;
  overflow: hidden;
  height: 400px;
  background-image: url("back.png");
  text-align: center;
  line-height: 30px;
  margin-left: 0px;

}

.item-1, 
.item-2, 
.item-3 {
  margin-top: 0;
  padding: 20px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  display: block;
  width: 90%;
  font-size: 1.6em;
  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  text-align: center;
}

.item-1 {
  animation-name: anim-1;
}
.item-2 {
  animation-name: anim-2;
}
.item-3 {
  animation-name: anim-3;
}

@keyframes anim-1 {
  0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 0%; opacity: 1; }
  33.33%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 0%; opacity: 1; }
  66.66%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 0%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

<center>
<div id="gifphrases1">

    <p class="item-1">If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge. <br>    <b>Marc Hogan - Pitchfork</b> </p>

    <p class="item-2">With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back. <br><b>Aerosyn-Lex Mestrovic - Visual Artist</b> </p>

    <p class="item-3">From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!<br>            <b>Jeffrey Paradise - Poolside</b>         </p>
</div>
</center>