Center several divs

Navigation
3

I am trying to center divs horizontally, (I do not understand why something so simple is so complicated ...)

I have seen that the function cal (), theoretically does this, and if it does, but it centers us with respect to the screen, it simply shows you the divs that you indicate by row: 

.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);
}

and not only that, but in the next row it only shows a div stuck to the right of the whole and in the third row it returns to show 5 divs.

In the width I have tried some simple to divide the total between 5 and in the height the rest the padding, the brode and the margin. The latter had also proven it in the width but with identical or similar result.

There is a father div: 

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

Where am I wrong?

I tried it with flexbox and it centers me the boxes but if a line has fewer boxes, it also centers them:

In this case the first row of the boxes from A to D centers them correctly, but in the second row the boxes E and F also center them, which is fine, but I want them to be below the boxes A and B .

That is, if a row has 4 boxes, center them and they look good and if one row has less than 3 boxes it should be aligned to the left with respect to the other rows, if this can be done with perfect flexbox, if you can with the perfect cal () function or any other solution.

I show you what I have achieved so far and the new problem that arises: 

.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>
    
asked by Isaac Palacio 31.01.2018 в 10:54
source

4 answers

3

My proposal is that you use CSS grid . Here you have the corresponding documentation. 

/* 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>

I have created 20 elements so that it resembles what you are looking for (you have indicated that it would be about 40 div).

  • grid-gap : indicates the space between the elements.
  • grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) : establishes that auto-fill repeats the elements with a minimum of 100px , and a maximum of 1fr . That is, when there is room for the next item, it will go up.
  • grid-auto-rows : causes the rows created by the elements that do not enter the upper rows, have height: 100px .
  

To see how it works, expand this snippet to full screen, and modify the size of the window.

EDIT:

If you only want 5 divs per row displayed, modify grid-template-columns by: 

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

You can also vary the minimum size of each element in the row (which in this case are 100px )

    
answered by 01.02.2018 / 18:54
source
6

It would be more comfortable if you put the whole code, even the html.

I do not know if I understand your question, if I do not answer what you want, specify a little more and we'll look again !!

If I do not understand wrong, you have 5 div (children) inside another (father). If so, what I recommend is that you use flexbox , it makes things a lot easier.

Basically you have to work with the father and tell him that you want his children to be centered. Here is a simple example. 

#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>
    
answered by 31.01.2018 в 12:55
3

As I understand you want to show 5 rows online and if there are more children you create a new row aligned to your left. For this you can use flex-wrap: wrap; , that is, use the adjustment value to show the elements in several rows.

To center your items you could use justify-content: space-between; in your parent box .flex , that is, use space-between to show the elements with the same spacing between them.

A possible example: 

.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>

There is also an alternative using flex: calc(100% / 5); with this you get that if there are more boxes, they automatically adjust to the full width.

Alternative: 

.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>

Ordered example 

.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>
    
answered by 31.01.2018 в 16:32
1

Look with the min-width: 100px you decide when it is the minimum that a box should have and move down.

But already if you decide to use the @Media you can change depending on the size of the screen. (I do not recommend it, I think that with the min-width is more than enough) 

.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>
    
answered by 31.01.2018 в 23:17
Unexpected result using string.split () How can I send the id along with an event in js