html5 - How to center align Text in carousel? -


I am trying to create simple text carousel using pure css3 (no javascript). With the help of some references; I managed to write the code mentioned below:

    

In this code, the text is being mis-aligned; Can you please help in fixing? Carosuel;

Please try it out:

 < code> & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; # Carousel Pe (Text-Alignment: Center; Position: Relative;} # Carousel P: nth-child (1) {Opacity: 1.0; -WebKit-Transform: Translation X (0 pixels); -MOZ-TRANSFORM: Translation X (0 Pixels ); -MMS-Transform: Translator X (0 px); -O-Transform: Translation X (0 pixels); Conversion: Translator X (0 pixels); Animation: Carousel 1 10S Infinite; Webkit-Animation: Carousel 1 10 S Infinity; / * Safari and Chrome * Sarosol P: nth-child (2) {Opacity: 0.0; Animation: Carousel 2 10s Infinite; Webkit-Animation: Carosol 2 10s Infinity; / * Safari and Chrome # / Carrosol P: nth-child (3 ) {Opacity: 0.0; Animation: Carousel 3 10S Infinite; Webkit-Animation: Carousel 3 10S Infinity; / * Safari and Chrome * Keyframe Carousel 1 {0%, 100% {Opacity: 1.0;} 33 % {Opacity: 0.0;} 66% {Opacity: 0.0;}} @ -webkit-keyframe carousel 1 {0%, 100% {Opacity: 1.0;} 33% {Opacity: 0.0;} 66% {Opacity: 0.0; }} @ Keyframe carousel2 {0%, 1 00% {Opacity: 0.0;} 33% {Opacity: 1.0;} 66% {Opacity: 0.0;}} @ -WebKit-Keframe Carousel 2 {0%, 100% {Opacity: 0.0;} 33% {Opacity: 1.0 ;} 66% {opacity: 0.0;}} @ keyframe carousel 3 {0%, 100% {opacity: 0.0;} 33% {opacity: 0.0;} 66% {opacity: 1.0;}} @ -WebKit-keyframe carousel 3 {0%, 100% {Opacity: 0.0;} 33% {Opacity: 0.0;} 66% {Opacity: 1.0;}} & lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "carousel" & gt; & Lt; P & gt; One here & lt; / P & gt; & Lt; P & gt; Two here & lt; / P & gt; & Lt; P & gt; Three here & lt; / P & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

This Bela will work:

Update:

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -