Centering Text in a Span tag not working as required

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>

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

Replace span with div. Span is an inline element. It has no width or height. — Grumpy, Oct 30 '21 at 20:54
Does this answer your question? [HTML span align center not working?](https://stackoverflow.com/questions/8392211/html-span-align-center-not-working) Also see ["text-align: center" isn't working in a span element](https://stackoverflow.com/questions/25477765/the-text-align-center-isnt-working-in-a-span-element) and [align text of span in the center of the page](https://stackoverflow.com/questions/34039792/align-text-of-span-in-the-center-of-the-page). — showdev, Oct 30 '21 at 20:58

score 2 · Accepted Answer · answered Oct 30 '21 at 21:10

2

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

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

answered Oct 30 '21 at 21:10

Josh Oyiki

36
3

score 0 · Answer 2 · answered Oct 30 '21 at 21:08

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>

score 0 · Answer 3 · answered Oct 30 '21 at 21:20

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>

Centering Text in a Span tag not working as required

3 Answers3