0

Mi problema es que el div se empieza a imprimir en pantalla a partir del centro de la pagina y lo que yo quiero es que el div alineé su centro con el centro de la pagina, es decir, gráficamente hablando que la linea vertical blanca que se forma entre los cuadros celestes quede en el centro de la pagina ¿Cómo lo ajusto?

body {
width: 100%;
}
.container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 10px;
}

.item {
  background-color: #5DADE2;
  text-align: center;
}

 #centrar {
   margin-left: auto;
   margin-right: auto;
   width: 100px;
   height: 100px;
 }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Mycss.css">
    <title>Pruebas</title>
</head>
<body> <!-- s,m,lg,xl-->
    <div id="centrar">
        <div class="container">
            <article class="item">1</article>
            <article class="item">2</article>
            <article class="item">3</article>
            <article class="item">4</article>
            <article class="item">5</article>
            <article class="item">6</article>
            <article class="item">7</article>
            <article class="item">8</article>
        </div>
    </div>
    <!--<script src="Myjs.js" type="text/javascript"></script> -->
</body>
</html>

0

1 respuesta 1

0

body {
width: 100%;
}
.container {
  display: grid;
  display: relative;
  justify-content: center;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 10px;
}

.item {
  background-color: #5DADE2;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Mycss.css">
    <title>Pruebas</title>
</head>
<body> <!-- s,m,lg,xl-->
    <div id="centrar">
        <div class="container">
            <article class="item">1</article>
            <article class="item">2</article>
            <article class="item">3</article>
            <article class="item">4</article>
            <article class="item">5</article>
            <article class="item">6</article>
            <article class="item">7</article>
            <article class="item">8</article>
        </div>
    </div>
    <!--<script src="Myjs.js" type="text/javascript"></script> -->
</body>
</html>

Lo único que hice fue usar la propiedad justify-content . Aquí te dejo más información.

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.