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
If you want to leave your span as is, set it to the following:
.animated span {
opacity: 1;
transition: all 0.5s;
display: block;
}
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>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 & Text
</div>
</div>
</div>