he creado esto en base a lo que he entendido, no sé si es exactamente lo que estabas buscando pero espero que te ayude :)
Para centrar el texto, puedes aplicar la propiedad 'position: absolute;' a tu etiqueta 'h2', ya que es el elemento que contiene el 'span' y el 'ul'. Al hacer esto, podrás utilizar las propiedades 'left' y 'top' para ajustar la posición de 'h2' y lograr el centrado deseado.
Por lo general, se considera que el 50% es una posición centrada. Sin embargo, debes tener en cuenta que este centrado se realiza con respecto a la esquina superior izquierda del contenedor. Por lo tanto, en el código, he agregado left: 47vw; (donde vw representa el Viewport Width) para centrar horizontalmente y top: 48vh; (donde vh representa el viewport height) para centrar verticalmente el 'h2'.
Una vez que el texto esté centrado, el siguiente paso es hacer que los elementos se muestren uno al lado del otro en lugar de en forma de columna. Para lograr esto, puedes utilizar Flexbox. Es importante aplicar Flexbox al elemento padre que contiene los elementos que deseas alinear en fila, de lo contrario no funcionará.
En el 'h2' (El cual es el elemento padre), he agregado display: flex; para indicar que utilizaremos Flexbox. Con flex-direction: row;, indicamos que todos los elementos hijos de 'h2' se posicionarán en filas.
Finalmente, se realizaron algunos ajustes en las animaciones. Se cambió el position: absolute; de los elementos li a position: relative; De esta forma css nos permite utilizar la propiedad 'top'
Se eliminó el retraso (delay) en las animaciones de ul#gio li:nth-child(2) y ul#gio li:nth-child(3) porque causaban que la animación no se mostrara correctamente al iniciar o recargar la página. En su lugar, se agregó top: 0; al inicio de la animación para que la palabra "fácil" se muestre inmediatamente al cargar o recargar. Luego, considerando que cada texto tiene una altura de 29px, se mueven hacia arriba en incrementos de -29px en cada parte de la animación. Esto funciona bien en la primera ejecución, pero se nota claramente el cambio al reiniciarse la animación. Para solucionarlo, se agregó un nuevo elemento al final de la lista con el mismo contenido que el primer elemento de la lista. Esto hace que, al reiniciar la animación, pase desapercibido y se logre una transición suave.
* {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
}
h2 {
position: absolute; /*Para poder alinearlo al centro de la pantalla con left y top*/
left: 47vw; /*Como el punto de referencia que se utiliza para centrar un elemento es la ezquina superior izquierda del elemento a mover
lo he movido un poco menos que el 50% del Viewport Width (ancho del dispositivo)*/
top: 48vh; /*Lo mismo pero ahora con el height*/
display: flex; /*De esta forma podemos ordenar los elementos que se encuentran en el interior de la etiqueta h2*/
flex-direction: row; /*Los elementos dentro de h2 se ubicaran en fila generando que span y ul estén uno al lado del otro*/
width: auto;
}
ul#gio {
width: auto;
height: 29px;
overflow: hidden;
font-size: 25px;
transform: translateX(1rem);
}
ul#gio li {
height: 29px;
display: block;
position: relative; /* Posición relativa*/
font-family: Arial;
animation-duration: 3s;
animation-name: anim;
animation-iteration-count: infinite;
top: 29px;
}
/* Cambié las animaciones, de esta forma si quieres editar la duración de tu animación no debes
coordinar los animation delay de cada elemento de la lista*/
@keyframes anim {
0%{
top: 0px;
}
33%{
top: -29px;
}
66%{
top: -58px;
}
100%{
top: -87px; /*Para que el reinicio de la animación no se note he agregado nuevamente el elemento inicial "facil" a tu lista,
de esta forma 'facil' es el último en tomar la posición del texto y coincide con el reinicio de la animacion para ocultar su cambio*/
}
}
<html>
<head>
<title>prube</title>
<link rel="stylesheet" href="i.css">
</head>
<body>
<h2 id="subtitle">
<span id="coin">Pueba </span>
<ul id="gio">
<li>
Facil
</li>
<li>
Rapido
</li>
<li>
Sencillo
</li>
<li>
Facil
</li>
</ul>
</h2>
</body>
</html>