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>Estoy tratando de alinear el texto en el centro de la página y responder a todos los dispositivos.
He probado varias opciones pero ninguna funcionó:
Prueba n.º 1: style="margin:auto; en el lapso
Prueba n.º 2: style="margin-left:-188; en el lapso
Prueba n.º 3: style="text-align: center;" en el div antes del lapso
Prueba No.4 position: absolute; en el lapso animado
En el hogar.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>en el 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; } }En la base.html
<script> const spans = document.querySelectorAll("span"); const animation = function () { for (let span of spans) span.classList.toggle("fade"); }; setInterval(animation, 2400); </script>Mi pregunta es cómo centrar el texto en el lapso y cuando hay oraciones largas similares al segundo lapso para centrar también
Si desea dejar su intervalo como está, configúrelo de la siguiente manera:
.animated span { opacity: 1; transition: all 0.5s; display: block; }comience colocando text-align:center en el div. No está muy claro exactamente cómo desea mostrar
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>Podrías usar display: grid para lograr eso.
Cambie sus elementos de span a div (probablemente debería darles una clase para que el CSS sea más claro)
grid-area: 1 / 1 / 1 / 1; para ambos div asegura que ambos se superponen. margin: auto; asegura que estén centrados. Y text-align: center; que el texto mismo esté centrado.
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>