中心幻灯片文本 html

Question

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

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

感谢并期待您的回答

这是在线网络 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 的 "left" 值定义为“-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-#”以清空每个上面的 space。

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

编辑 #3:
现在想想，在“#gifphrases1”中加上position: relative，就可以做出你想要的垂直居中了！
将 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>

Answer 2

我注意到的第一件事是您的 <p class="item-2"></p>

之后还有另一个 </p> 标签

接下来这是您的所有 HTML 工作：

    <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>

还有你的CSS

#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: 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; }
    }

中心幻灯片文本 html

center Slideshow text html

html

css

text

slideshow

responsive