Question

这是我的一些旋转文字：

<div class="abc"">
</br></br>
  <h2 class="sentence" >We Are  

 <br class="rwd-break">
    <div class="slidingHorizontal">
  <span style="color: #3cae75;">  Effective <img src="../21.png" style="display:inline;" ></span> 
  <span style="color: #ce9f13;">  Exclusive <img src="../11.png" style="display:inline;" ></span> 
  <span style="color: #e31620;">  Exciting <img src="../41.png" style="display:inline;" ></span>
  <span style="color: #ffffff;">  The next big thing in town! <img src="../31.png" style="display:inline;" ></span>
</div>

“We Are”部分保持静态，而4个跨度中的文本每4秒交替一次。下面是我用来旋转文本的代码的链接：http://codepen.io/Ignet/pen/zGKgmq

现在我想将呈现的文本居中放在屏幕上。

“我们是”的一部分正在集中，但跨度不是。继承人使用：

.abc{
  left: 0;
  right: 0;
/*  margin: auto auto;
 text-align: center;*/
  font-family: hobo std;
  position: absolute;
left: 50%;
transform: translate(-50%,0);
}

/* alternate text */
/*Sentence*/

.sentence {
 color: #ffffff;
 font-size: 50px;
 font-weight: 400;
 font-family: hobo std;
 text-align: center;}

我也需要它做出回应。请帮忙！谢谢。

Answer 1

将此添加到您的css：

.wrapper>h2{text-align:center;}

Answer 2

为display: inline;提供.slidingHorizontal并删除<br class="rwd-break">。这会使span在文本We are旁边对齐并居中对齐文本。我希望这能解决你的问题。

Answer 3

我已经调整了你想要的方式。

在你的

上

HTML

<body>
<header>

</header>
<section class="wrapper">

  <h2 class="sentence">We Are
    <div class="slidingHorizontal">
      <span style="color: #3cae75;">Effective <img src="../21.png" style="display:inline;" ></span>
      <span style="color: #ce9f13;">Exclusive <img src="../21.png" style="display:inline;" ></span>
      <span style="color: #e31620;">Exciting <img src="../21.png" style="display:inline;" ></span>
      <span style="color: #ffffff;">The next big thing in town! <img src="../21.png" style="display:inline;" ></span>
    </div>
  </h2>


  </section>

</body>

CSS

/*Body*/

body {
  background-color: #00abe9;
}
/*Sentence*/

.sentence {
  color: #222;
  font-size: 30px;
  text-align: center;
}
/*Wrapper*/

.wrapper {
  background-color: #f5f5f5;
  font-family: 'Raleway', sans-serif;
  padding: 40px 40px;
  position: relative;
  width: 70%;
  background-color: #00abe9;
}
/* Horizontal alternate text */
/*Horizontal Sliding*/

.slidingHorizontal {
  display: inline;
  text-indent: 8px;
}

.slidingHorizontal span {
  animation: leftToRight 12.5s linear infinite 0s;
  -ms-animation: leftToRight 12.5s linear infinite 0s;
  -webkit-animation: leftToRight 12.5s linear infinite 0s;
  color: #00abe9;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.slidingHorizontal span:nth-child(2) {
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}

.slidingHorizontal span:nth-child(3) {
  animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.slidingHorizontal span:nth-child(4) {
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}

.slidingHorizontal span:nth-child(5) {
  animation-delay: 10s;
  -ms-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}
/*leftToRight Animation*/

@-moz-keyframes leftToRight {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: translateX(-50px);
  }
  10% {
    opacity: 1;
    -moz-transform: translateX(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateX(0px);
  }
  30% {
    opacity: 0;
    -moz-transform: translateX(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes leftToRight {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }
  25% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateX(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes leftToRight {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -ms-transform: translateX(-50px);
  }
  10% {
    opacity: 1;
    -ms-transform: translateX(0px);
  }
  25% {
    opacity: 1;
    -ms-transform: translateX(0px);
  }
  30% {
    opacity: 0;
    -ms-transform: translateX(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* end alternate text horizontal */

提醒自己要小心CSS：position：absolute; ：）

这里是DEMO

*它的响应能力

*希望你能学到一些东西。祝你好运。

中心跨度为div

3 个答案: