1

Hola, estoy intentando alinear un h1 en el centro de la pantalla con css3 en la misma posición horizontal en la que se encuentra. Este es el html y el css que tengo, agradezco la ayuda :)

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
#castillo {
    display: block;
    width: 100vw;
    height: 100vh;
}
h1 {
    margin: 10px;
    position: absolute;
}
<!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">
    <link rel="stylesheet" href="index.css">
    <title>Draco 🐲</title>
</head>
<body>
    <h1>DRACOS</h1>
    <img src="img/castle.jpg" alt="castillo" id="castillo">
    <main>
        
    </main>
</body>
</html>

2 respuestas 2

1

.h1__dracos{
  text-align: center
}
<h1 class="h1__dracos">DRAKOS</h1>

Hola Santiago yo tambien soy nuevo pero creo que lo que necesitas hacer es ponerle una clase al h1 como por ejemplo:

<h1 class="h1__dracos">DRAKOS</h1>

y despues ir a tus estilos css y escribir:

.h1__dracos{
  text-align: center
}
1
  • muchas gracias, creo que te refieres al tema de la especificidad
    – santiago
    Commented el 4 mar. 2023 a las 2:04
0

Basta com quitarle la propiedad position: absolute; y agregar la propiedad text-align: center; a la etiqueta h1 en los estilos CSS

De acuerdo con la documentación en w3schools

Un elemento con position: absolute; se coloca en relación con el ancestro posicionado más cercano. Sin embargo, si un elemento con posición absoluta no tiene ancestros con posición, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

h1 {
  margin: 10px;
  text-align: center;
}

#castillo {
  display: block;
  width: 100vw;
  height: 100vh;
}
<!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">
  <link rel="stylesheet" href="index.css">
  <title>Draco 🐲</title>
</head>

<body>
  <h1>DRACOS</h1>
  <img src="img/castle.jpg" alt="castillo" id="castillo">
  <main>

  </main>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.