center文本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

我想你可以更新一下你的“关键帧”。为每个@关键帧定义“左”值为"-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添加到“#gif学期1”中可以解决overflow: hidden规则出现故障的问题。

但是，您必须注意#gif词组1元素的高度。我在下面的示例中使用height: 400px将其设置为400 it (请参阅代码片段)。

编辑#3

现在，考虑一下，将position: relative添加到“#gif词组1”中，可以使您实现所需的垂直对中！

将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>之后还有另一个<p class="item-2"></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; }
    }