Html 响应旋转词

我试着让我的轮换词反应灵敏，并在页面上居中。这是来自GitHub的代码，仅适用于HTML和CSS。当浏览器为100%时，输出不在页面上居中，它会稍微偏离右侧。当浏览器变窄时，跨距词不能正确对齐。非常感谢您的帮助-查德

h1{
颜色：#000；
字体大小：44px；
边缘顶端：40px；
文本对齐：居中；
}
/*判决*/
.判决{
颜色：#222；
字体大小：30px；
文本对齐：左对齐；
}
/*流行效应*/
波普效应{
显示：内联；
文本缩进：8px；
}
.POP效应范围{
动画：pop 12.5s线性无限0s；
-ms动画：pop 12.5s线性无限0s；
-webkit动画：pop 12.5s线性无限0s；
颜色：#00abe9；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
}
.POP影响范围：第n个孩子（2）{
动画延迟：2.5s；
-ms动画延迟：2.5s；
-webkit动画延迟：2.5s；
}
.POP影响范围：第n个孩子（3）{
动画延迟：5s；
-ms动画延迟：5s；
-webkit动画延迟：5s；
}
.POP影响范围：第n个孩子（4）{
动画延迟：7.5s；
-ms动画延迟：7.5s；
-webkit动画延迟：7.5s；
}
.POP影响范围：第n个孩子（5）{
动画延迟：10秒；
-毫秒动画延迟：10秒；
-webkit动画延迟：10秒；
}
/*流行效果动画*/
@-moz关键帧弹出{
0%{不透明度：0；}
5%{opacity:0；-moz变换：旋转（0deg）缩放（0.10）倾斜（0deg）平移（0px）；}
10%{opacity:1；-moz变换：translateY（0px）；}
25%{opacity:1；-moz变换：translateY（0px）；}
30%{opacity:0；-moz变换：translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-webkit关键帧弹出{
0%{不透明度：0；}
5%{opacity:0；-webkit变换：旋转（0deg）缩放（0.10）倾斜（0deg）平移（0px）；}
10%{opacity:1；-webkit transform:translateY（0px）；}
25%{opacity:1；-webkit transform:translateY（0px）；}
30%{opacity:0；-webkit transform:translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-ms关键帧弹出{
0%{不透明度：0；}
5%{不透明度：0；-ms变换：旋转（0度）缩放（0.10）倾斜（0度）平移（0像素）；}
10%{不透明度：1；-ms变换：translateY（0px）；}
25%{不透明度：1；-ms变换：translateY（0px）；}
30%{不透明度：0；-ms变换：translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

Pop效果看起来非常好
漂亮。
清洁的
优雅的
壮丽的
可爱极了。

“当浏览器为100%时，输出不在页面中心，它会稍微偏离右侧。”

因此，让我们首先了解问题的真正原因：

html中的

span

s被定位为“绝对”，而被定位为绝对的对象被视为从未存在过（其他对象无法与其交互）。因此，当您尝试使用

文本对齐：居中

要使

h1

和

居中，只有

h1

居中，然后

尝试与已经居中的

h1

对齐

（如下图所示）

下面是我对这个问题的解决方案：

首先，将所有东西（

h1

，

）封装在一个div中

---

如果你不理解我的解释（因为我不擅长解释：p），这里有一个小问题：当你的列表有一个短单词和一个长单词时会发生什么？什么反对使用引导？添加的div和css会使效果集中在页面上，但不会使其响应屏幕大小。如果我理解正确，js脚本应该使div class=“stuff”具有响应性，但我没有得到这种效果。我通过两种方式安装了脚本。（1） ，我将脚本放在它自己的一个名为popfeffect.js的文件中，并在页面的标题部分链接到它。（2） ，我将脚本包装在script标记中，并将其放置在head部分。我可以说，剧本根本没有影响效果——查德

  <div class="stuff">  <!-- The new element -->
    <h1>Pop Effect looks very

      <div class="popEffect">
        <span>Handsome.</span>
        <span>Clean.</span>
        <span>Elegant.</span>
        <span>Magnificent.</span>
        <span>Adorable.</span>
      </div>

    </h1>
  </div>  <!-- The new element -->

.stuff{

  /*the width of the "<h1>" + "<div class="popEffect">"*/
  width: 600px 

  /*the css below will center almost any html object*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

}
h1{
    white-space: nowrap;
}

$(document).ready(function(){var spans = $(".popEffect span"); //get all the "span" inside "popEffect"
var spansWidth = [];

spans.each(function(){
    spansWidth.splice(0,0,$(this).width());
});
//
  var largest = Math.max.apply(Math, spansWidth);//get the largest number
  $(".stuff").width($("h1").width() + largest);
});