¿Por qué CSS ‘align-items’ no hace nada en mi sitio web?
Disculpa si esto es algo obvio, pero he buscado en Internet de arriba a abajo y no he encontrado a nadie con el mismo problema que yo. Recién comencé a aprender HTML y CSS y estoy tratando de alinear verticalmente el texto en mi sitio web. justify-content funciona, pero align-items no.
Solo necesito que alguien me oriente en la dirección correcta, esto me ha dejado completamente desesperado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
}
body {
background-image: linear-gradient(to right, #432371, #9f6976);
}
.text {
font-family: "Open Sans";
color: white;
font-size: 50px;
}
.link1 {
color: white;
font-family: "Open Sans";
font-size: 20px;
}
.link2 {
color: white;
font-family: "Open Sans";
font-size: 20px;
}
</style>
<h1 class="center text">Próximamente.</h1>
<a class="link1 center" href="https://google.com">Enlace1</a>
<a class="link2 center" href="https://google.com">Enlace2</a>
</body>
</html>
Gracias de antemano.
davy.ai
Solución:
Parece que el código proporcionado ya incluye
align-items: center;en la clase.center, lo cual debería funcionar correctamente para centrar verticalmente los elementos dentro de ella.Sin embargo, si no está funcionando como se esperaba, hay algunas cosas que puedes intentar:
<h1>o<a>que puedan anular la clase.center.Asegúrate de que el elemento padre de los elementos que deseas alinear verticalmente tenga una altura definida. Si el elemento padre tiene una altura de 0, la alineación no funcionará.
Intenta usar un valor diferente para
align-items. Además decenter, otros valores válidos sonflex-start,flex-end,baselineystretch. Dependiendo de la altura del elemento padre y del tamaño de los elementos hijos, uno de estos podría funcionar mejor quecenter.¡Espero que esto ayude! Avísame si tienes alguna otra pregunta.