css centrado dynamic div

Tengo un div #content donde en la carrera a la izquierda agrego divs flotados #block y hay divs con ancho fijo a cada lado de div (a), #lcontent y #rcontent Los divs tienen cambios dynamics de altura y contenido en el tiempo.

el contenido debe permanecer en el centro si hay 2,3,4 o 100 #bloque dentro de él. Pero el #bloque siempre debe estar a la izquierda de #content

Solo #lcontent, #rcontent y #block tienen ancho fijo Lo que quiero mostrar en la web.

código HTML

código css

 #lcontent { float: left; width: 100px; min-width: 100px; min-height: 100px; background: lightblue; } #rcontent { float: right; width: 100px; background: lightblue; } #mcontent { background: lightgrey; float: right; right: 50%; position: relative; } #content { float: right; right: -50%; position: relative; background: green; min-height: 200px; text-align: center; } #block { margin: 5px; width: 300px; border: 1px solid red; display: inline-block;½ height: 150px; } 

Esto será muy difícil usando css puro y será necesario que conozca la cantidad de casillas que tendrá el contenedor (y agregue una clase al padre, dependiendo de ello), que si se trata de contenido dynamic, entonces debería tener un servidor. lenguaje lateral para esto. También necesitarás un montón de consultas de medios:

 .container { text-align:center; } .centered { text-align:left; margin:auto; } .block { margin:3px; width:100px; height:100px; float:left; vertical-align:top; border:1px solid red; } .seven {max-width:770px;} /* this is the number of block * their outer width (margin + border + padding + width) */ /*one block*/ @media (max-width:219px) { /* this is the width of 2 blocks outer width -1px (you may need to add the width of the left and right column to this plus any left and right padding of the center column. This is really the max width of the container div */ .centered { width:110px; /* the outer width of a block */ } } /*two blocks*/ /* keep adding media queries to either your max number of blocks or the largest screen size you want to support */ /*min width is 2 * 1 block outer width, max width is 3 * 1 block outer width - 1px*/ @media (min-width:220px) and (max-width:329px) { .centered { width:220px; /* the outer width of 2 blocks */ } } @media (min-width:330px) and (max-width:439px) { .centered { width:330px; } } @media (min-width:440px) and (max-width:549px) { .centered { width:440px; } } @media (min-width:550px) and (max-width:659px) { .centered { width:550px; } } @media (min-width:660px) and (max-width:769px) { .centered { width:660px; } } @media (min-width:770px) and (max-width:879px) { .centered { width:770px; } } @media (min-width:880px) and (max-width:989px) { .centered { width:880px; } } @media (min-width:990px) and (max-width:1100px) { .centered { width:990px; } } 
 

Puede agregar marcadores de posición invisibles al final de sus bloques en línea. Eso alineará a la izquierda la última fila.

http://jsfiddle.net/aakt65x4/

Sin embargo, si no llena la primera fila, todo aparecerá alineado a la izquierda. Pero creo que eso es lo que quieres, ¿verdad?

HTML:

  

CSS:

 body { text-align: center; /* center a max-width container */ font-size: 0; /* remove spaces between blocks */ } .container { /* you don't need this */ background-color: #eee; /* so you can see what's happening */ max-width: 960px; /* to demonstrate the centering of a max-width container */ display: inline-block; /* center the max-width container */ text-align: center; /* center the group of blocks */ } .block { display: inline-block; /* left-align within the group */ background-color: red; /* so you can see what's happening */ height: 100px; width: 100px; margin: 10px; } .placeholder { display: inline-block; /* add to the line of blocks */ width: 120px; /* width + margin of a block */ }