Centrar grupo de divs en CSS

publicado por: Anonymous

me gustaría saber cómo sería posible alinear un grupo de divs (4 divs) de la siguiente manera:

Imagen

He probado a hacerlo con float:left, pero si lo hago, se me salen fuera del div principal. Además, como se ve en la imagen, quiero que haya margen entre ellos. La cosa es que no encuentro la manera de disponerlos de esa manera, no se me ocurre otra cosa más que posicionarlos individualmente, pero estoy convencido de que se puede hacer más fácilmente.

solución

Si el ancho y alto de las cuatro cajas es conocido y fijo, utilizando flexbox y calc (IE10+) se puede lograr de esta manera.

Quiero hacer una aclaración: flexbox es ideal para layouts de una sola dimensión, por lo cual en este caso puede no ser la mejor solución. En el futuro cerceno tendremos grillas nativas con css que resolverán este problema de una forma mucho más sencilla.

_x000D_

_x000D_

.contenedor {_x000D_
  border: solid 1px black;_x000D_
  margin: 10px;_x000D_
}_x000D_
_x000D_
h1,_x000D_
h2 {_x000D_
  text-align: center;  _x000D_
}_x000D_
_x000D_
.cajas {_x000D_
  border: solid 1px blue;_x000D_
  margin: 10px;_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
}_x000D_
_x000D_
.caja {_x000D_
  background-color: red;_x000D_
  margin: calc(25% - 50px);_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
}

_x000D_

<div class="contenedor">_x000D_
  <h1>Título centrado</h1>_x000D_
  <h2>Subtítulo centrado</h2>_x000D_
_x000D_
  <div class="cajas">_x000D_
    <div class="caja">_x000D_
    </div>_x000D_
    <div class="caja">_x000D_
    </div>_x000D_
    <div class="caja">_x000D_
    </div>_x000D_
    <div class="caja">_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *