Tema: ¿ Como centrar varios DIV dentro de otro DIV ?
Ver Mensaje Individual
  #16 (permalink)  
Antiguo 06/06/2011, 09:40
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?
Otra forma más semántica pero menos compatible con pseudonavegadores
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>x</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <style type="text/css">
  7. * {margin:0; padding:0; position: relative;}
  8. html, body {
  9.   height: 100%;
  10.   font-family: garamond, serif;
  11.   font-size: 100%;
  12. }
  13. #contenedor {
  14.   background: #fe0 url(serv/css/estilos/reticula.gif) repeat;
  15.   width: 900px;
  16.   margin: 0 auto;
  17.   overflow: hidden;
  18. }
  19. #contenedor > div {
  20.   width:140px;
  21.   height: 105px;
  22.   background: #cacaca;
  23.   float: left;
  24.   margin: 10px;
  25. }
  26. #contenedor > div:nth-child(3n) {
  27.   float:right;
  28. }
  29. #contenedor > div:nth-child(3n-1) {
  30.   margin-left: 220px;
  31.   margin-right: 220px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36.     <div id="contenedor">
  37.         <div>1</div>
  38.         <div>2</div>
  39.         <div>3</div>
  40.         <div>4</div>
  41.         <div>5</div>
  42.     </div>
  43. </body>
  44. </html>

Y si de centrar múltiples elementos (desconocido su número a priori) se trata, sin necesidad de crear cajas innecesarias sería con el uso de text-align: center; y letter-spacing (para separar los hijos lateralmente) en el contenedor padre y a los div´s hijos declararlos como elementos de línea.

Inieva: buena ocurrencia el crear la segunda caja de tamaño mayor.