How to center align Text in carousel?

Problem

I'm trying to create simple text carousel using pure css3 (NO Javascript). With the help of few references; I managed to write code mentioned below: 

<!DOCTYPE html>
<html>
<head>
<style>
#carousel p:nth-child(1) {
    opacity: 1.0;
    -webkit-transform: translateX(87px);
    -moz-transform: translateX(87px);
    -ms-transform: translateX(87px);
    -o-transform: translateX(87px);
    transform: translateX(87px);
    animation:carousel1 10s infinite;
    -webkit-animation:carousel1 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(2) {
    opacity: 0.0;
    animation:carousel2 10s infinite;
    -webkit-animation:carousel2 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(3) {
    opacity: 0.0;
    -webkit-transform: translateX(-87px);
    -moz-transform: translateX(-87px);
    -ms-transform: translateX(-87px);
    -o-transform: translateX(-87px);
    transform: translateX(-87px);
    animation:carousel3 10s infinite;
    -webkit-animation:carousel3 10s infinite; /* Safari and Chrome */
}

@keyframes carousel1 {
    0%, 100% {opacity: 1.0;}
    33% {opacity: 0.0;}
    66% {opacity: 0.0;}
}

@-webkit-keyframes carousel1 {
    0%, 100% {opacity: 1.0;}
    33% {opacity: 0.0;}
    66% {opacity: 0.0;}
}

@keyframes carousel2 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 1.0;}
    66% {opacity: 0.0;}
}

@-webkit-keyframes carousel2 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 1.0;}
    66% {opacity: 0.0;}
}

@keyframes carousel3 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 0.0;}
    66% {opacity: 1.0;}
}

@-webkit-keyframes carousel3 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 0.0;}
    66% {opacity: 1.0;}
}
</style>
</head>
<body>
   <div id="carousel">
   <P> One is here </p>
   <P> Two is here </p>
   <P> Three is here </p>
   </div>
</body>
</html>

In this code, text is getting mis aligned; can you please help to fix same. Carosuel; must be infinite and text should come in the middle.

Problem courtesy of: Pawan Mude

Solution

Please Try This:

<!DOCTYPE html>
<html>
<head>
<style>
#carousel p { text-align: center; position: relative; }

#carousel p:nth-child(1) {    
opacity: 1.0;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
animation:carousel1 10s infinite;
-webkit-animation:carousel1 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(2) {
opacity: 0.0;
animation:carousel2 10s infinite;
-webkit-animation:carousel2 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(3) {
opacity: 0.0;
animation:carousel3 10s infinite;
-webkit-animation:carousel3 10s infinite; /* Safari and Chrome */
}

@keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}

@-webkit-keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}

@keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}

@-webkit-keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}

@keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}

@-webkit-keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}
</style>
</head>
<body>
<div id="carousel">
<p> One is here </p>
<p> Two is here </p>
<p> Three is here </p>
</div>
</body>
</html>

This fiddle will work: http://jsfiddle.net/6zZra/

UPDATE: http://jsfiddle.net/rajmathan/Uq4Jk/

Solution courtesy of: rajmathan

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.