Home / Questions / 328606
Accepted
Fernanda
Asked: 2020-02-12 11:22:31 +0800 CST 2020-02-12 11:22:31 +0800 CST

chrome doesn't recognize justify-self: center

  • 772

Good morning, I am using the css grid for the first time and in mozilla everything is perfect, but in chrome it does not take me the justify-self. Is there any compatibility that I do not know?

I pass the code so you can see what it can be. Thank you

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "futura Lt BT";
  font-size: 16px;
}

.contenedor {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}


/*principal producto*/

main {
  position: relative;
  top: 50px;
  grid-column-start: 1;
  grid-column-end: -1;
}

main #institucional {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}


/*imagenes principales*/

main #institucional #imagenes {
  width: 100%;
  display: inline-block;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 200px;
}

main #institucional #imagenes #uno {
  background: yellow;
}

main #institucional #imagenes #dos {
  background: red;
}

main #institucional #imagenes #tres {
  background: blue;
}

main #institucional #imagenes #cuatro {
  background: blueviolet;
}


/*logo principal circular*/

main #institucional #logoPrincipal {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: orange;
  grid-column-start: 1;
  grid-row-end: -1;
  position: absolute;
  align-self: center;
  justify-self: center;
}


/*promo vigente del mes*/

main .promo {
  height: 250px;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <title>PROMO Exclusive 2020</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="css/normalizr.css" />
  <script src="js/modernizr-custom.js"></script>
</head>

<body>
  <div class="contenedor">
    <main>
      <div id="institucional">
        <div id="imagenes">
          <img id="uno" src="#" alt="1" />
          <img id="dos" src="#" alt="2" />
          <img id="tres" src="#" alt="3" />
          <img id="cuatro" src="#" alt="4" />
        </div>
        <div id="logoPrincipal">
          <img src="#" alt="logo exclusive" />
        </div>
      </div>
    </main>
  </div>
</body>

css3

1 Answers

  1. Best Answer

    When an element has an absolute position, it stops having the behavior of its container and starts to have a behavior scaled to the higher containers up to the global one, that is, in your case the child element is a grid-itembut when having the absolute position this it is no longer part of the grid(something they changed in somewhat older versions of WebKit and Chromium).

    The solution to this is whenever an absolute position is used on an element to put the position relative to its container to keep control, not only by Chrome, but also by others like Safari or Edge. In your case adding an position: relativea main #institucionalfixes it.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "futura Lt BT";
  font-size: 16px;
}

.contenedor {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}


/*principal producto*/

main {
  position: relative;
  top: 50px;
  grid-column-start: 1;
  grid-column-end: -1;
}

main #institucional {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}


/*imagenes principales*/

main #institucional #imagenes {
  width: 100%;
  display: inline-block;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 200px;
}

main #institucional #imagenes #uno {
  background: yellow;
}

main #institucional #imagenes #dos {
  background: red;
}

main #institucional #imagenes #tres {
  background: blue;
}

main #institucional #imagenes #cuatro {
  background: blueviolet;
}


/*logo principal circular*/

main #institucional #logoPrincipal {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: orange;
  grid-column-start: 1;
  grid-row-end: -1;
  position: absolute;
  align-self: center;
  justify-self: center;
}


/*promo vigente del mes*/

main .promo {
  height: 250px;
}
    <!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <title>PROMO Exclusive 2020</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="css/normalizr.css" />
  <script src="js/modernizr-custom.js"></script>
</head>

<body>
  <div class="contenedor">
    <main>
      <div id="institucional">
        <div id="imagenes">
          <img id="uno" src="#" alt="1" />
          <img id="dos" src="#" alt="2" />
          <img id="tres" src="#" alt="3" />
          <img id="cuatro" src="#" alt="4" />
        </div>
        <div id="logoPrincipal">
          <img src="#" alt="logo exclusive" />
        </div>
      </div>
    </main>
  </div>
</body>

    • 15