Html 文本位于div中的中心跨距_Html_Css

Html 文本位于div中的中心跨距

html css

Html 文本位于div中的中心跨距,html,css,Html,Css,这是我的一些旋转文本： <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" styl

这是我的一些旋转文本：

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

我也需要它的响应能力。请帮忙！谢谢。

给予

显示：内联。水平滑动，并移除
。这将使span
与文本对齐We are
并将文本居中对齐。我希望这能解决您的问题。
将此添加到您的css中：
.wrapper>h2{text-align:center;}

我已经按照你想要的方式调整了
在你的
HTML
提醒自己小心CSS:position:absolute；：）
这是
*它的反应也很灵敏
*希望你能学到一些东西。祝你好运。不起作用：（我需要文本相对于跨度呈现的内容居中，例如，如果屏幕显示“we is effective”，它将以ff为中心，如果它显示“we is the next big thing in town”，它将以“big”为中心。你能摆弄一下你所有的问题吗？不，这是给我一个与前面的结果相同；我需要这样的东西：“我们在哪里”相对于跨度水平移动
.wrapper>h2{text-align:center;}

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

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