Este es mi CSS:
/* Contenedor principal para el logotipo */
.logo-envoltorio {
posición: relativa;
pantalla: flexible;
justificar-contenido: centro;
alinear elementos: centro;
ancho: 100%;
margen superior: 60px;
índice z: 1;
}
/* Contenedor de logotipo */
.logo-contenedor {
posición: absoluta;
arriba: 10vh;
izquierda: 50%;
transformar: traducirX(-50%);
alineación de texto: centro;
ancho máximo: 90%;
tamaño de caja: cuadro de borde;
}
/* Estilos de logotipo */
.logo-contenedor img {
ancho máximo: 100%;
altura: automático;
mostrar: bloquear;
}
/* Estilos responsivos */
@media (ancho mínimo: 3840 px) {
.logo-contenedor {
arriba: 5vh;
izquierda: 43%;
}
}
/* Pantallas grandes (2560px y 3840px) */
@media (ancho mínimo: 2251 px) {
.logo-contenedor {
arriba: 6vh;
ancho: 55%;
}
}
/* Escritorio y pantallas grandes */
@media (ancho mínimo: 1200 px) y (ancho máximo: 2250 px) {
.logo-contenedor {
arriba: 8vh;
ancho: 45%;
}
}
/* Pantallas de tabletas */
@media (ancho mínimo: 768 px) y (ancho máximo: 1199 px) {
.logo-contenedor {
arriba: 10vh;
ancho: 60%;
}
}
/* Pequeñas pantallas móviles */
@media (ancho máximo: 767 px) {
.logo-contenedor {
arriba: 8vh;
ancho: 50%;
}
}
/* Pantallas móviles extra pequeñas (360 px de ancho) */
@media (ancho máximo: 550 px) {
.logo-contenedor {
arriba: 8vh;
ancho: 80%;
}
.logo-container img {
max-width: 100%;
}}
Y parece que no funciona en mis diferentes páginas. Lo único que es diferente en las otras páginas es sólo el texto. Entonces, incluso si lo alineo correctamente en una página, no se alinea correctamente en la otra página. Creo que luché con esto durante 500 horas….