在 Span 标签中居中文本未按要求工作

Question

    const spans = document.querySelectorAll("span");
    const animation = function () {
      for (let span of spans) span.classList.toggle("fade");
    };
    //setInterval(animation, 2400);

.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  height: 60px;
  line-height: 50px;
}

.animated span {
  opacity: 1;
  transition: all 0.5s;
}

.animated>.fade {
  opacity: 0;
}

@media (max-width: 800px) {
  .animated {
    height: 70px;
    font-size: 25px;
  }
}

<div class="animated">
   Hey, I'm<br>
   <span class="color-primary fade" id="animated-name">Name Name</span>
   <span class="color-primary" id="animated-text">Description about something <br>Text & Text</span>
</div>

我正在尝试将文本与页面中心对齐并响应所有设备。

我尝试了几个选项，但都没有成功：

审判一号： 在 span 中添加了style="margin:auto;

审判二： 在 span 中添加了style="margin-left:-188;

审判3： 在 span 之前的 div 中添加了style="text-align: center;"

试炼4号 在动画跨度中添加了position: absolute;

在home.html中

<div class="animated">
   Hey, I'm<br>
   <span class="color-primary fade" id="animated-name">Name Name</span>
   <span class="color-primary" id="animated-text">Description about something</br>Text & 
    Text</span>
</div>

在css中

.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  height: 60px;
  line-height: 50px;
}

.animated span {
  opacity: 1;
  transition: all 0.5s;
}

.animated>.fade {
  opacity: 0;
}

@media (max-width: 800px) {
  .animated {
    height: 70px;
    font-size: 25px;
  }
}

在base.html中

    <script>
    const spans = document.querySelectorAll("span");
    const animation = function () {
      for (let span of spans) span.classList.toggle("fade");
    };
    setInterval(animation, 2400);
    </script>

我的问题是如何让span中的文本居中，以及当有类似于第二个span的长句也要居中

Answer 1

如果您想保持 span 不变，请将其设置为以下内容：

.animated span {
    opacity: 1;
    transition: all 0.5s;
    display: block;
}    

Answer 2

您可以使用display: grid 来实现。

将您的 span 元素更改为 div（您可能应该给它们一个类以使 CSS 更清晰）

grid-area: 1 / 1 / 1 / 1; 这两个div 确保它们都重叠。 margin: auto; 确保它们居中。并且text-align: center; 文本本身是居中的。

const spans = document.querySelectorAll(".grid > div");
const animation = function() {
  for (let span of spans) span.classList.toggle("fade");
};
setInterval(animation, 2400);

.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  height: 60px;
  line-height: 50px;
}

.animated .grid div {
  opacity: 1;
  transition: all 0.5s;
}

.animated .grid .fade {
  opacity: 0;
}

@media (max-width: 800px) {
  .animated {
    height: 70px;
    font-size: 25px;
  }
}

.grid {
  display: grid;
}

.grid>div {
  grid-area: 1 / 1 / 1 / 1;
  margin: auto;
  text-align: center;
}

<div class="animated">
  Hey, I'm<br>
  <div class="grid">
    <div class="color-primary fade" id="animated-name">
       Name Name
    </div>
    <div class="color-primary" id="animated-text">
       Description about something<br>Text &amp; Text
    </div>
  </div>
</div>

Answer 3

首先将 text-align:center 放在 div 上。不太清楚你想如何显示

const spans = document.querySelectorAll("span");
    const animation = function () {
      for (let span of spans) span.classList.toggle("fade");
    };
    setInterval(animation, 2400);

.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  height: 60px;
  line-height: 50px;
  text-align:center;
}

.animated span {
  opacity: 1;
  transition: all 0.5s;
}

.animated>.fade {
  opacity: 0;
 
}


@media (max-width: 800px) {
  .animated {
    height: 70px;
    font-size: 25px;
  }
}

<div class="animated">
   Hey, I'm<br>
   <span class="color-primary fade" id="animated-name">Name Name</span>
   <span class="color-primary" id="animated-text">Description about something <br>Text & Text</span>
</div>