¿Cómo centrar tres divs horizontalmente dentro de un div principal?

Sé que esta pregunta se ha formulado con frecuencia, pero parece que nunca la puedo poner en práctica. ¿Puedes decirme qué pasa?

Tengo tres divs dentro de un #container div, que quiero centrar lado a lado. El #container tiene 1000px de ancho (quiero mantenerlo así). Aquí está mi código:

#container { margin-top: 500px; position: absolute; width: 1000px; } .related-article { background-color: #D6A400; display: inline-block; width: 230px; height: 300px; border-radius: 30px; margin-bottom: 0px; } .related-article > img { width: 200px; height: 150px; border-radius: 15px; margin-top: 15px; } .related-article > h3 { font-size: 15px; width: 180px; text-align: justify; margin-left: auto; margin-right: auto; color: #f1f1f1; font-family: Abel, serif; margin-bottom: none; } a { text-decoration: none; } #right { float: right; } #left { float: left; } #center { margin-left: 385px; margin-right: 385px; } 
  

Toda ayuda será apreciada con mucho gusto.

Puedes hacer eso bastante simple usando flexbox:

 #container { /* margin-top: 500px; */ width: 1000px; margin: 0 auto; } .related-article { background-color: #D6A400; display: inline-block; border-radius: 30px; margin-bottom: 0px; } .related-article > img { width: 200px; height: 150px; border-radius: 15px; margin-top: 15px; } .related-article > h3 { font-size: 15px; width: 180px; text-align: justify; margin-left: auto; margin-right: auto; color: #f1f1f1; font-family: Abel, serif; margin-bottom: none; } a { text-decoration: none; } } #container { width: 1000px; } .related-article { background-color: #D6A400; display: inline-block; width: 230px; height: 300px; border-radius: 30px; margin-bottom: 0px; } .related-article > img { width: 200px; height: 150px; border-radius: 15px; margin-top: 15px; } .related-article > h3 { font-size: 15px; width: 180px; text-align: justify; margin-left: auto; margin-right: auto; color: #f1f1f1; font-family: Abel, serif; margin-bottom: none; } a { text-decoration: none; } .box { margin-right: 10px; width: 230px; height: 300px; } .flex-container { display: flex; align-items: center; justify-content: center; } 
  

Una solución que usa display: flex . Lea más acerca de flexbox aquí

  1. Aplicar display: flex al contenedor
  2. Agregue flex: 1 a todos los del niño que se centrarán horizontalmente.
 h2 { margin-top: 500px; } #container { position: absolute; width: 1000px; display: flex; text-align: center; } #container div { flex: 1; } .related-article { background-color: #D6A400; display: inline-block; width: 230px; height: 300px; border-radius: 30px; margin-bottom: 0px; } .related-article > img { width: 200px; height: 150px; border-radius: 15px; margin-top: 15px; } .related-article > h3 { font-size: 15px; width: 180px; text-align: justify; margin-left: auto; margin-right: auto; color: #f1f1f1; font-family: Abel, serif; margin-bottom: none; } a { text-decoration: none; } 
 

Here's what you'll do!

Retire todos los flotadores y reemplácelos con:

 display: inline-block; 

Además, por mucho que lo haya intentado, con ese espacio entre divs, no podrás mostrarlos de la manera correcta. Establezca el espacio entre #left, #center y #right divs a menos de 50 px, o trabaje con porcentaje (%).

Puede usar display:table para eso …

Puedes tener Parent div con estilo

 display:table 

y sus 3 hijos divs como

 display:table-cell 
 #container { margin-top: 500px; position: absolute; width: 1000px; } .related-article { background-color: #D6A400; display: inline-block; width: 230px; height: 300px; border-radius: 30px; margin-bottom: 0px; } .related-article > img { width: 200px; height: 150px; border-radius: 15px; margin-top: 15px; } .related-article > h3 { font-size: 15px; width: 180px; text-align: justify; margin-left: auto; margin-right: auto; color: #f1f1f1; font-family: Abel, serif; margin-bottom: none; } a { text-decoration: none; } #container { margin-top: 500px; position: absolute; width: 1000px; display: table; } .related-article { background-color: #D6A400; display: inline-block; width: 230px; height: 300px; border-radius: 30px; margin-bottom: 0px; } .related-article > img { width: 200px; height: 150px; border-radius: 15px; margin-top: 15px; } .related-article > h3 { font-size: 15px; width: 180px; text-align: justify; margin-left: auto; margin-right: auto; color: #f1f1f1; font-family: Abel, serif; margin-bottom: none; } a { text-decoration: none; } #left, #right, #center { display: table-cell; } #center { margin-left: 385px; margin-right: 385px; } h2 { display: table-row; } 
  

elimine float y agregue display: inline-block a los tres, luego agregue text-align: center; al contenedor.

Pruebe esto y agregue float: a la izquierda a su div derecha, izquierda y central, y reduzca su margen a la izquierda y a la derecha del centro div.

 #right { float: left; } #left { float: left; } #center { margin-left: 85px; margin-right: 85px; float:left; } 

En lugar de agregar centro, izquierda y derecha. Usa ul y establece el ancho de li en porcentaje. Mejorará el código y reducirá el código css.

La URL del codepen es http://codepen.io/SESN/pen/pbbjrb

CSS

 #container { width: 100%; } .ulContainer { margin: 0px auto; list-style: none; width: 80%; } .ulContainer li { width: 33.33%; float: left; } 

HTML