3

Estoy intentando centrar horizontalmente unos divs, (no entiendo porque algo tan sencillo es tan complicado...)

He visto que la función cal(), teoricamente hace esto, y si lo hace, pero nos los centra con respecto a la pantalla, simplemente te muestra los divs que le indicas por fila:

.caja{  
    position: relative;
    float: left;        
    padding: 0px;   
    border: 1px solid rgb(204,153,102);
    margin: 15px 15px;              
    width: cal(100% / 5);
    min-width: cal(100% / 5);
    min-height: calc(20% - 0px - 2 * 1% - 2px);
}

y no solo eso, sino que en la siguiente fila solo muestra un div pegado a la derecha del todo y en la tercera fila vuelve a mostrar 5 divs.

En la anchura he probado alggo sencillo dividir el total entre 5 y en la altura le resto el padding, el brode y el margen. Esto ultimo lo había probado tambien en la anchura pero con identico o parecido resultado.

Hay un div padre:

.contendor {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    padding:0;
    margin: 0; 
}

¿Donde me estoy equivocando?

Lo he probado con flexbox y me centra las cajas pero si una linea tiene menos cajas las centra tambien:

introducir la descripción de la imagen aquí

En este caso la primera filas las cajas de la A a la D las centra correctamente, pero en la segunda fila las cajas E y F tambien las centra, que esta bien, pero quiero que queden debajo de las cajas A y B.

Osea si una fila tiene 4 cajas, las centra y quedan bien y si una fila tiene menos de 3 cajas la deberia aliñar a la izquierda con respecto a las otras filas, si esto se puede hacer con flexbox perfecto, si se puede con la función cal() perfecto o cualquier otra solución.

Os muestro lo que he conseguido hasta ahora y el problema nuevo que se me plantea:

.contenedor {
	margin: 30px;	
	display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(4, minmax(22%, 1fr));
   grid-auto-rows: 270px;
}

.contenido {	
	background:rgba(230,231,234, 0.3);	
	padding: 0px;	
	border: 1px solid rgb(204,153,102);	
}
.titulo {
  background-color: rgb(204,153,102);
	color: #FFE5CC;
  font-weight: 700; 
   font-style: normal;
	font-size: 1.2rem;		
	line-height: 100%;
	letter-spacing: 2px;
	text-align: center;	
	vertical-align: middle;
	height: 20%;	
	padding: 1%;
}

.cuerpo{
  height: 80%;
	min-height: 80%;
	font-family: "Roboto", helvetica, serif, sans-serif;
  font-weight: 600; 
  font-style: normal;
	font-size: 0.8rem;	
	text-align: center;	
	line-height: 15px;
	letter-spacing: 2px;
	padding: 1%;
	padding-bottom: 2%;
}

.sttj {
	background-color: #FFE5CC;;	
	font-family: "DidactGothic", helvetica, serif, sans-serif;
   font-weight: normal; 
   font-style: normal;
	font-size: 1.5rem;	
	letter-spacing: 1px;
	text-align: center;	
	width: 100%;
	min-width: 100%;	
	/*height: 2%;
	min-height: 2%;*/
	margin-bottom: 2%;
	padding: 2%;
	clear: both;	
	float: none;
}

@media screen and (max-width:700px) {
	.contendor {		
   	grid-template-columns: repeat(3, minmax(22%, 1fr));
	}
  .contenido {    
	}
}
<div class="contenedor">
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div> <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
  
<div class="sttj">
	Titulo "Este DIV tiene que ir aparte de los otros divs, en una sola linea y acontinuación el resto de DIVs" 
</div>
 
  
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div> <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
   <div class="contenido"><div class="titulo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div class="cuerpo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>  
</div>

6
  • 1
    Posible duplicado de Centrar div con CSS
    – GDP
    Commented el 31 ene. 2018 a las 10:01
  • Con esto he conseguido que queden homogenos todos los divs, pero siguen estando descentrados con respecto a la pantalla: width: calc(25% - 0px - 2 * 1% - 2px); max-height: calc(20% - 0px - 2 * 1% - 2px); Commented el 31 ene. 2018 a las 11:28
  • La función es calc() no cal() y no sirve para centrar, lo que hace son cálculos matemáticos.
    – user7176
    Commented el 31 ene. 2018 a las 16:35
  • Si me comi la c y si que sirve --> desarrollolibre.net/blog/tema/151/css/la-funcion-calc-en-css Commented el 31 ene. 2018 a las 16:39
  • 1
    Lo que aclara es que matematicamente podrias saber cual es el centro. pero la funcion no centra, solo hace las cuentas.
    – gbianchi
    Commented el 31 ene. 2018 a las 18:37

4 respuestas 4

6

Sería más cómodo si pones el código entero, incluso el html.

No se si entiendo tu pregunta, si no te respondo a lo que quieres especifica un poco más y lo volvemos a mirar!!

Si no entiendo mal, tienes 5 div (hijos) dentro de otro (padre). Si es así, lo que te recomiendo es que emplees flexbox, facilita mucho las cosas.

Básicamente has de trabajar con el padre y decirle que quieres que sus hijos esten centrados. A continuación pongo un ejemplo sencillo.

#padre{
  height:100px;
  width:500px;
  
  background-color: orange;
  display:flex; /* declaras que vas a usar flexbox*/
    justify-content: center; /* centrado horizontal*/
    align-items: center; /* centrado vertical */
}

.hijo{
  height: 40px;
  width: 40px;
  
  background-color: red;
  
  margin: 10px;
}
<div id="padre">
  <div class="hijo">1 </div>
  <div class="hijo">2</div>
  <div class="hijo">3 </div>
  <div class="hijo">4 </div>
  <div class="hijo">5 </div>
</div>

1
  • Gracias @CarlosMilles Pero no son 5 hijos, son muchos más como 40, pero quiero que en una fila no aparezcan más de 4 o 5 y el resto se pongan en la siguiente fila, así hasta el final. Commented el 31 ene. 2018 a las 14:25
3

Mi propuesta es que utilices CSS grid. Aquí tienes la documentación correspondiente.

/* Con estas 6 líneas te valdría*/
.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: 100px;
}

/* Este CSS es para modificar los elementos para que se vea mejor (colores y el tamaño) */
.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #ffeead;
}

html, body {
  background-color: #ffeead;
  margin: 10px;
}

.container > div:nth-child(1n) {
  background-color: #96ceb4;  
}

.container > div:nth-child(3n) {
  background-color: #88d8b0;
}

.container > div:nth-child(2n) {
  background-color: #ff6f69;
}

.container > div:nth-child(4n) {
  background-color: #ffcc5c;
}
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
    </div>

He creado 20 elementos para que se asemeje a lo que estás buscando (has indicado que serían unos 40 div).

  • grid-gap: indica el espacio entre los elementos.
  • grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)): establece que por auto-fill se repitan los elementos con un mínimo de 100px, y un máximo de 1fr. Es decir, cuando haya espacio para el siguiente elemento, lo subirá.
  • grid-auto-rows: hace que las filas creadas por los elementos que no entran en las filas superiores, tengan height: 100px.

Para ver cómo funciona, amplía este snippet a pantalla completa, y modifica el tamaño de la ventana.

EDIT:

Si sólo quieres que se muestren 5 divs por fila, modifica grid-template-columns por:

grid-template-columns: repeat(5, minmax(100px, 1fr));

También puedes variar el tamaño mínimo de cada elemento en la fila (que en este caso son 100px)

5
  • Hola, tu código adaptándolo me funciona, pero me hace una cosa rara también, en la ultima fila, si no hay más hijos el los añade, aunque estén vacíos. Commented el 2 feb. 2018 a las 11:30
  • Ok ya funciona con algunas modificaciones, pero tengo un div que es diferente a los demás, os muestro el codigo aquí codepen.io/bichomen/pen/BYjKby Commented el 2 feb. 2018 a las 12:01
  • Busca en la documentación. Hay una opción con la que puedes dibujar literalmente la estructura que quieres. Aquí lo tienes.
    – MigherdCas
    Commented el 2 feb. 2018 a las 17:02
  • 1
    He visto el pen que has subido, y sólo tienes que añadir: grid-column: 1 / -1; al div especial. 1 indica que empieza en la primera linea de columna (en la documentación está bien explicado), y -1 que acaba en la última línea de columna (es decir, ocupa toda la fila él sólo). Creo que es lo que buscas.
    – MigherdCas
    Commented el 2 feb. 2018 a las 17:07
  • Muchas gracias!! ahora si!! Commented el 5 feb. 2018 a las 15:47
3

Según tengo entendido quieres mostrar 5 filas en línea y si existen más hijos que te crea una fila nueva alineado a su izquierda. Para ello puedes usar flex-wrap: wrap;, es decir, usa el valor de ajuste para mostrar los elementos en varias filas.

Para centrar tu items podrias usar justify-content: space-between; en tu caja padre .flex, es decir, usa space-between para mostrar los elementos con el mismo espaciado entre ellos.

Un posible ejemplo:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  /* Use space-between para mostrar los elementos con el mismo espaciado entre ellos. */
  justify-content: space-between;
  padding: 10px;
}

.item {
  background-color: red;
  height: 40px;
  width: 15%;
  /* Valor con quien jugar */
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>

También existe una alternativa usando flex: calc(100% / 5); con esto consigues que si existen más cajas, se ajusten automático al ancho total.

Alternativa:

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 1rem;
}

.item {
  flex: calc(100% / 6);
  background-color: red;
  /* Creamos espacio entre nuestras cajas */
  border: 3px solid silver;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
</div>

Ejemplo ordenado

.flex {
  background-color: silver;
  display: flex;
  /* Use el valor de ajuste para mostrar los elementos en varias filas. */
  flex-wrap: wrap;
  padding: 10px;
}

.item {
  background-color: red;
  box-shadow: inset 0 0 0 2px silver;
  height: 40px;
  width: 20%;
  /* 100% / 5 = 20% */
  line-height: 40px;
  text-align: center;
}


/* Responsivo (se puede ajustar las cajas hijos a gusto colores). */

@media screen and (max-width:700px) {
  .item {
    width: 25%;
    /* 100% / 4 = 25% */
  }
}
<div class="flex">
  <div class="item">1 </div>
  <div class="item">2</div>
  <div class="item">3 </div>
  <div class="item">4 </div>
  <div class="item">5 </div>
  <div class="item">6 </div>
  <div class="item">7 </div>
  <div class="item">8 </div>
  <div class="item">9</div>
  <div class="item">10 </div>
  <div class="item">11 </div>
  <div class="item">12 </div>
  <div class="item">13 </div>
  <div class="item">14 </div>

</div>

6
  • Si @D.Bulten con flex-wrap: wrap; consigo lo que quiero en parte, si te fijas, las cajas no quedan centraras con respecto a la página sino alienadas a la izquierda. Quizas tenga que meter un div por encima de .flex para centrar este primero. Commented el 31 ene. 2018 a las 16:13
  • @IsaacPalacio ya te he modificado mi respuesta, simplemente debes añadir a la caja padre .flex la propiedad justify-content: space-between;, ya me comentas, si era el resultado deseado, saludos.
    – D.Bulten
    Commented el 31 ene. 2018 a las 17:32
  • Si, pero la ultima fila sigue haciendo cosas raras, si la ultima fila tiene solo una caja se alinea a la izquierda debajo de las otras, pero si por ejemplo hay tes cajas, una se alinea a la izquierda, la de en medio en el centro y la ultima a la derecha del todo. Commented el 1 feb. 2018 a las 12:02
  • @IsaacPalacio eso es lo bueno de flex se puede ordenar mejor las cajas, aun así te he dejado un tercer ejemplo ordenado como deseas. Saludos.
    – D.Bulten
    Commented el 1 feb. 2018 a las 13:18
  • 1
    Sin duda, esta es la mejor respuesta @IsaacPalacio Commented el 1 feb. 2018 a las 16:41
1

Mira con el min-width:100px tu decides cuando es lo mínimo que debe tener un cuadro y se mueva para abajo.

Pero ya si tu decides usar el @Media puedes cambiar dependiendo el tamaño de la pantalla. (no te lo recomiendo, creo que con el min-width es mas que suficiente)

.padre{
padding:10px;
}

.padre div {
display:inline-block;
height:100px;
width: calc(95%/5);
background-color:#555; 
margin-bottom:5px;
min-width:100px;
}

@media only screen and (max-width: 600px) {
.padre div {
width: calc(95%/4);
  }
}
<div class="padre">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>

1
  • Hombre si es resizemejor que mejor, con resize, ¿Te refieres a responsive? Commented el 1 feb. 2018 a las 11:59

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.