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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I am trying to align text to the center of the page and to be responsive for all devices.

I have tried several option but none of them worked:

Trial No.1: added style="margin:auto; in the span

Trial No.2: added style="margin-left:-188; in the span

Trial No.3: added style="text-align: center;" in the div before the span

Trial No.4 added position: absolute; in the animated span

In the 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>

In the 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;
  }
}

In the base.html

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

My question is how to cetner the text in the span and when there are long sentences similar to the second span to be also centered

CodePudding user response：

You could use display: grid to achieve that.

Change your span elements to div (you probably should give those a class to make the CSS clearer)

grid-area: 1 / 1 / 1 / 1; for both of those div ensures that they both overlap. margin: auto; ensures that they are centered. And text-align: center; that the text itself is centered.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you want to leave your span as is, set it to the following:

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

CodePudding user response：

start with placing text-align:center on the div. Not really clear exactly how you want to display

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>