Html 如何将旋转木马中的文本居中对齐？_Html_Css_Transform_Carousel_Css Animations

Html 如何将旋转木马中的文本居中对齐？

html css

Html 如何将旋转木马中的文本居中对齐？,html,css,transform,carousel,css-animations,Html,Css,Transform,Carousel,Css Animations,我正在尝试使用纯css3（无Javascript）创建简单的文本转盘。借助少量参考文献；我成功地编写了下面提到的代码： <!DOCTYPE html> <html> <head> <style> #carousel p:nth-child(1) { opacity: 1.0; -webkit-transform: translateX(87px); -moz-transform: translateX(87px);

我正在尝试使用纯css3（无Javascript）创建简单的文本转盘。借助少量参考文献；我成功地编写了下面提到的代码：

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


#传送带p:n个孩子（1）{
不透明度：1.0；
-webkit转换：translateX（87px）；
-moz变换：translateX（87px）；
-ms变换：translateX（87px）；
-o-变换：translateX（87px）；
转化：translateX（87px）；
动画：旋转10秒无限；
-webkit动画：carousel1 10s无限；/*Safari和Chrome*/
}
#传送带p:n个孩子（2）{
不透明度：0.0；
动画：10秒无限旋转；
-webkit动画：carousel2 10s无限；/*Safari和Chrome*/
}
#传送带p:n个孩子（3）{
不透明度：0.0；
-webkit转换：translateX（-87px）；
-moz变换：translateX（-87px）；
-ms变换：translateX（-87px）；
-o-变换：translateX（-87px）；
转换：translateX（-87px）；
动画：旋转木马10s无限；
-webkit动画：carousel3 10s无限；/*Safari和Chrome*/
}
@关键帧旋转木马1{
0%，100%{不透明度：1.0；}
33%{不透明度：0.0；}
66%{不透明度：0.0；}
}
@-webkit关键帧旋转木马1{
0%，100%{不透明度：1.0；}
33%{不透明度：0.0；}
66%{不透明度：0.0；}
}
@关键帧传送带2{
0%，100%{不透明度：0.0；}
33%{不透明度：1.0；}
66%{不透明度：0.0；}
}
@-webkit关键帧旋转木马2{
0%，100%{不透明度：0.0；}
33%{不透明度：1.0；}
66%{不透明度：0.0；}
}
@关键帧旋转木马3{
0%，100%{不透明度：0.0；}
33%{不透明度：0.0；}
66%{不透明度：1.0；}
}
@-webkit关键帧旋转木马3{
0%，100%{不透明度：0.0；}
33%{不透明度：0.0；}
66%{不透明度：1.0；}
}
 一个在这里
 两个在这里
 三个在这里

在这段代码中，文本对齐错误；你能帮我修一下吗。卡罗塞尔；必须是无限的，文本应该在中间。请尝试以下操作：

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


#转盘p{文本对齐：中心；位置：相对；}
#传送带p:n个子女（1）{
不透明度：1.0；
-webkit转换：translateX（0px）；
-moz变换：translateX（0px）；
-ms变换：translateX（0px）；
-o-变换：translateX（0px）；
转换：translateX（0px）；
动画：旋转10秒无限；
-webkit动画：carousel1 10s无限；/*Safari和Chrome*/
}
#传送带p:n个孩子（2）{
不透明度：0.0；
动画：10秒无限旋转；
-webkit动画：carousel2 10s无限；/*Safari和Chrome*/
}
#传送带p:n个孩子（3）{
不透明度：0.0；
动画：旋转木马10s无限；
-webkit动画：carousel3 10s无限；/*Safari和Chrome*/
}
@关键帧旋转木马1{
0%，100%{不透明度：1.0；}
33%{不透明度：0.0；}
66%{不透明度：0.0；}
}
@-webkit关键帧旋转木马1{
0%，100%{不透明度：1.0；}
33%{不透明度：0.0；}
66%{不透明度：0.0；}
}
@关键帧传送带2{
0%，100%{不透明度：0.0；}
33%{不透明度：1.0；}
66%{不透明度：0.0；}
}
@-webkit关键帧旋转木马2{
0%，100%{不透明度：0.0；}
33%{不透明度：1.0；}
66%{不透明度：0.0；}
}
@关键帧旋转木马3{
0%，100%{不透明度：0.0；}
33%{不透明度：0.0；}
66%{不透明度：1.0；}
}
@-webkit关键帧旋转木马3{
0%，100%{不透明度：0.0；}
33%{不透明度：0.0；}
66%{不透明度：1.0；}
}
一个在这里
两个在这里
三个在这里

这把小提琴会起作用：

更新：

我尝试了的“文本对齐：居中”，但没有给出所需的结果。谢谢；文字是一个接一个的；它应该在相同的位置被替换。你的意思是它应该在相同的位置闪烁吗？是的；对的以最大限度地利用空间；我希望在同一个地方把它写下来；就像在同一个位置闪烁一样。@PawanMude我已经更新了小提琴。请检查一下，谢谢；它起作用了。我想我需要添加一些文本淡入淡出效果（因为闪烁效果会影响可读性）