旋转单词以及如何将其居中

Question

想做center这个小姐姐，抱抱... 这是我的网站：https://www.ajdinalic.cf/

我对这个编码还是个新手，在 google 上找到了这个代码顺便说一句，这是关于 weebly 的，我试图修复但我不知道，我不想让它变得更糟

.rw-wrapper{
 width: 80%;
 position: relative;
 margin: 110px auto 0 auto;
 font-family: 'Bree Serif';
 padding: 10px;
}

.rw-sentence{
 margin: 0;
 text-align: center;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
 color: #444;
 white-space: initial;
 font-size: 200%;
 font-weight: normal;
}
.rw-words{
    display: inline;

}
.rw-words span{
 position: absolute;
 opacity: 0;
 overflow: hidden;
 width: 100%;
 color: #6b969d;
 text-align: center;
}
.rw-words-1 span{
 animation: rotateWordsFirst 18s linear infinite 0s;
 text-align: center;
}
.rw-words-2 span{
 animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
 animation-delay: 3s; 
 color: #6b889d;
}
.rw-words span:nth-child(3) { 
 animation-delay: 6s; 
 color: #6b739d; 
}
.rw-words span:nth-child(4) { 
 animation-delay: 9s; 
 color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
 animation-delay: 12s; 
 color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
 animation-delay: 15s; 
 color: #9b6b9d;
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
 25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
 20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

<!DOCTYPE html>
<html>
<head></head>
<section class="rw-wrapper">
 <h2 class="rw-sentence">
  <span>I</span>
  <br>
  <div class="rw-words rw-words-1">
   <span>Miss</span>
   <span>Want to hug</span>
   <span>Want to kiss</span>
   <span>Need</span>
   <span>Want to see</span>
   <span>Want to be with</span>
  </div><br>
  <span>You</span>
 </h2>
</section>
<body class='  wsite-theme-light'>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
<div style='display:none'>{content}</div>
<div style='display:none'>{content}>{footer}</div>
</body>
</html>

Answer 1

将 top: 75px; left: 0; right: 0; 添加到 .rw-words span。

如果有帮助请告诉我。

旋转单词以及如何将其居中

Rotating words and how to center it

html

css

center