html - 如何在轮播中居中对齐文本？

我正在尝试使用纯 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>

在此代码中，文本对齐错误；你能帮忙修一下吗？旋转木马；必须是无限的，文本应该在中间。

最佳答案

请试试这个:

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

这个 fiddle 可以工作:http://jsfiddle.net/6zZra/

更新: http://jsfiddle.net/rajmathan/Uq4Jk/

关于html - 如何在轮播中居中对齐文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23210495/

html - 如何在轮播中居中对齐文本？

上一篇：jquery - css 过渡效果在点击时不起作用？

下一篇：javascript - 使用相同的划分和变量创建动态谷歌地图