Centering a span inside a div

Question

I have a rotating text slider on my website that uses keyframe transitions.

I have all the text centered but the text inside the span sits to the side and I have tried everything I can think of to center it with no job.

/*Sentence*/
.sentence{
    color: #999;
    font-size: 3em;
    text-align:center;
}
/*Wrapper*/
.wrapper{
   font-family: serif;
   text-align:center;
   position: relative;
   width: 100%;
}

/*Vertical Sliding*/
.slidingVertical{
   display: inline;
}
.slidingVertical span{
   animation: topToBottom 12.5s linear infinite 0s;
   -ms-animation: topToBottom 12.5s linear infinite 0s;
   -webkit-animation: topToBottom 12.5s linear infinite 0s;
   color: #00abe9;
   opacity: 0;
   overflow: hidden;
   position: absolute;
}
.slidingVertical span:nth-child(2){
   animation-delay: 2.5s;
   -ms-animation-delay: 2.5s;
   -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
   animation-delay: 5s;
   -ms-animation-delay: 5s;
   -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
   animation-delay: 7.5s;
   -ms-animation-delay: 7.5s;
   -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
   animation-delay: 10s;
   -ms-animation-delay: 10s;
   -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -moz-transform: translateY(-50px); }
   10% { opacity: 1; -moz-transform: translateY(0px); }
   25% { opacity: 1; -moz-transform: translateY(0px); }
   30% { opacity: 0; -moz-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -webkit-transform: translateY(-50px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   25% { opacity: 1; -webkit-transform: translateY(0px); }
   30% { opacity: 0; -webkit-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -ms-transform: translateY(-50px); }
   10% { opacity: 1; -ms-transform: translateY(0px); }
   25% { opacity: 1; -ms-transform: translateY(0px); }
   30% { opacity: 0; -ms-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}

<section class="wrapper">
    <div class="sentence">
        <p>header text - why use our service</p>
        <div class="slidingVertical">
            <span style="color:white; background:#018fcf">Best service on the market</span>
            <span style="color:white; background:#0e7dcb">reason 1</span>
            <span style="color:white; background:#1977B0">Long reason 2 - best value for money</span>
            <span style="color:white; background:#276cb1">reason 3</span>
            <span style="color:white; background:#125eaa">reason 5</span>
        </div>
        <br>
        <p>footer text - service is epic</p>
    </div>
</section>

Also as you will see, the span doesnt fit to the size of the text and forces the text to wrap.

I have tried increasing the div and span to 100% width but that seems to decrease it to 0 for some strange reason.

Answer 1

It's because you position your spans absolutely - you need to center that absolute by adding left:50% and translating the x back -50%

I have also added position relative to your container:

/*Sentence*/
.sentence{
    color: #999;
    font-size: 3em;
    text-align:center;
}
/*Wrapper*/
.wrapper{
   font-family: serif;
   text-align:center;
   position: relative;
   width: 100%;
}

/*Vertical Sliding*/
.slidingVertical{
   position:relative;
}
.slidingVertical span{
   animation: topToBottom 12.5s linear infinite 0s;
   -ms-animation: topToBottom 12.5s linear infinite 0s;
   -webkit-animation: topToBottom 12.5s linear infinite 0s;
   color: #00abe9;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
}
.slidingVertical span:nth-child(2){
   animation-delay: 2.5s;
   -ms-animation-delay: 2.5s;
   -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
   animation-delay: 5s;
   -ms-animation-delay: 5s;
   -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
   animation-delay: 7.5s;
   -ms-animation-delay: 7.5s;
   -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
   animation-delay: 10s;
   -ms-animation-delay: 10s;
   -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
   0% { opacity: 0; -moz-transform: translate(-50%, -50px); }
   5% { opacity: 0; -moz-transform: translate(-50%, -50px); }
   10% { opacity: 1; -moz-transform: translate(-50%, 0px); }
   25% { opacity: 1; -moz-transform: translate(-50%, 0px); }
   30% { opacity: 0; -moz-transform: translate(-50%, 50px); }
   80% { opacity: 0; -moz-transform: translate(-50%, 50px); }
   100% { opacity: 0; -moz-transform: translate(-50%, 50px); }
}
@-webkit-keyframes topToBottom{
   0% { opacity: 0; -webkit-transform: translate(-50%, -50px); }
   5% { opacity: 0; -webkit-transform: translate(-50%, -50px); }
   10% { opacity: 1; -webkit-transform: translate(-50%, 0px); }
   25% { opacity: 1; -webkit-transform: translate(-50%, 0px); }
   30% { opacity: 0; -webkit-transform: translate(-50%, 50px); }
   80% { opacity: 0; -webkit-transform: translate(-50%, 50px); }
   100% { opacity: 0; -webkit-transform: translate(-50%, 50px); }
}
@-ms-keyframes topToBottom{
   0% { opacity: 0; -ms-transform: translate(-50%, -50px); }
   5% { opacity: 0; -ms-transform: translate(-50%, -50px); }
   10% { opacity: 1; -ms-transform: translate(-50%, 0px); }
   25% { opacity: 1; -ms-transform: translate(-50%, 0px); }
   30% { opacity: 0; -ms-transform: translate(-50%, 50px); }
   80% { opacity: 0;-ms-transform: translate(-50%, 50px); }
   100% { opacity: 0;-ms-transform: translate(-50%, 50px); }
}

<section class="wrapper">
    <div class="sentence">
        <p>header text - why use our service</p>
        <div class="slidingVertical">
            <span style="color:white; background:#018fcf">Best service on the market</span>
            <span style="color:white; background:#0e7dcb">reason 1</span>
            <span style="color:white; background:#1977B0">Long reason 2 - best value for money</span>
            <span style="color:white; background:#276cb1">reason 3</span>
            <span style="color:white; background:#125eaa">reason 5</span>
        </div>
        <br>
        <p>footer text - service is epic</p>
    </div>
</section>