0

Tengo un div llamado container y dentro de container iré cargando con JS varios items

introducir la descripción de la imagen aquí

Lo que quiero es que los items esten centrados pero uno al lado del otro, y cuando ya no haya espacio, pues creen otra fila. Como si estuvieran display:inline-block;

introducir la descripción de la imagen aquí

Así, pero desde el centro. La forma que encontré de hacerlo es envolver todos los item en un elemento <center> </center> pero no quisiera usarlo

<div class="container">
   <div class="item"> 
       ...
   </div> 
   <div class="item"> 
       ...
   </div> 
</div>

1 respuesta 1

1

Para lo que tú necesitas está la opción flex que facilita mucho estas cosas.

A no ser que quieras hacer algo muy específico, una buena opción es usar algún framework que te facilite la vida con el CSS. A mi me gusta Bootstrap.

Pongo un ejemplo con Bootstrap. Cargo Bootstrap, y poniendo en el bloque que tú llamas container las clases d-flex (equivalente a display: flex) y justify-content-center (equivalente a justify-content: center) ya conseguirías lo que tú estás buscando:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="d-flex justify-content-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Y si no quieres añadir Bootstrap, el modo de hacerlo es poner los estilos sobre el bloque de clase container:

.container {
  display:flex;
  justify-content: center;
}
<div class="container">
   <div>Item 1</div> 
   <div>Item 2</div> 
   <div>Item 3</div> 
</div>

Espero que te pueda servir.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.