html - 中心跨度与 div 中的文本

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

现在我想将呈现 文本置于屏幕中央。

'We are' 部分居中，但 span 不居中。这是我使用的 CSS:

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