中心幻灯片文本html

Question

我试图使幻灯片中的文本靠近左边边缘，始终在水平和垂直的灰色区域中间。同样，正如您可能看到的，X滚动栏的成长X scrollbar的成长，而黑色空间则向右显示。任何人会知道我能弄清楚的问题是什么，我将非常感谢您的帮助。

在响应模式下，黑色区域显示在您的右边，我不确定它是否与幻灯片或另一个错误有关？

谢谢，期待您的答案

这是网络在线http://vtwg.eu/zmt/untitled.3.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。将"左"值定义为" -100％"，" 0％"one_answers" 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>

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