Foros del Web » Creando para Internet » CSS »

Centrar varios objetos alineados PERFECTAMENTE

Estas en el tema de Centrar varios objetos alineados PERFECTAMENTE en el foro de CSS en Foros del Web. Hola a todos, Tengo una duda existencial, si bien tengo conocimientos de HTML/CSS, todavia hay algo que no puedo lograr con total exactitud. En realidad ...
  #1 (permalink)  
Antiguo 22/06/2011, 19:34
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 6 años, 10 meses
Puntos: 5
Centrar varios objetos alineados PERFECTAMENTE

Hola a todos,

Tengo una duda existencial, si bien tengo conocimientos de HTML/CSS, todavia hay algo que no puedo lograr con total exactitud. En realidad si, lo puedo lograr pero quiero saber cual es la mejor forma de hacerlo, sin tanto codigo de mas.

Les planteo lo siguiente... en la paigna unicamente creo un div con un width de 100px, y el height no importa para este ejemplo, que sea cualquiera. Luego creo 4 divs hijos dentro de el y a cada uno le doy por ejemplo 20px de width... los alineo horizontalmente, ya sea con float:left o con display: inline-block.

Hasta ahi todo bien....ahora lo unico que faltaria seria centrar esos divs hijos, pero el problema esta cuando le quiero dar un espacio entre cada div, es decir... un margin. Por ejemplo... les doy un margin-right, pero que pasa... el ultimo div no va a quedar pegado a la derecha del todo, por ende no van a quedar centrados PERFECTAMENTE. La solucion que se es la de sacarle el margin-right al ultimo div, pero quiero saber si hay una mejor manera de realizar esto, siendo sincero no me quedo muy comodo haciendolo a mi forma, siento que se debe poder hacer de una forma mas profesional.

Por si no se entendio lo que busco, dejo una imagen:



Demas esta decir que la imagen la hice asi nomas con paint, pero lo que yo busco es que sean cuadrados iguales, con la misma distancia entre ellos y centrados perfectamente.
  #2 (permalink)  
Antiguo 22/06/2011, 20:37
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 6 meses
Puntos: 66
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

puedes hacerlo asi como lo estas haciendo o asi:

http://jsfiddle.net/tredio/N9TVq/
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #3 (permalink)  
Antiguo 22/06/2011, 21:10
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

hola ciel y tredio, al menos yo no he encontrado otra forma de hacerlo, y me uno a la pregunta.
Hasta el momento doy una clase a la ultima columna para quitar el margin.
La complicación que encontré con esto es por ejemplo si queremos listar una galería de imágenes con php por ejemplo. lo cual logré solucionar añadiendo la clase cada "n" repeticiones del bucle (while, foreach, etc).

Retomando tu planteo tredio, realizé algunos cambios, es como lo estoy haciendo actualmente, por tanto me gustaría saber sus opiniones, al mismo tiempo me alegra si aporta algo.

Un abrazo.
  #4 (permalink)  
Antiguo 22/06/2011, 21:35
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 6 años, 10 meses
Puntos: 5
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Muchas gracias por ese codigo tredio, no se me hubiera ocurrido nunca hacer uso de overflow:hidden para "ocultar" ese margin y que no se me vaya el ultimo div para abajo y no tener que usar el metodo de darle clase a la ultima caja. Muchas Gracias.

De todas formas, si alguien tiene otra idea que no dude en postearla.

@ cristian

Si, tal cual... cuando se trata de hacer algo dinamico con php se te re complica en estos casos... es muy tedioso.

Respecto a lo que modificaste del codigo de tredio, me parece que sigue siendo mas eficaz lo de tredio. Si te fijas con tu codigo, en la vista previa, a la izquierda de todo hay una margen, cosa que en el lado derecho, al final de la ultima caja... no hay ningun margen... digamos que ahi no esta centrado al 100%.

Lo que no entendi del codigo de tredio, es por que le pone un float: left al wraper, o sea... entiendo el PORQUE DEBERIA ESTAR HACIA LA IZQUIERDA, pero no se supone que por defecto lo haria? o sea... no se supone que si sacamos el float: left del wraper seria exactamente lo mismo?

Btw, espero que con HTML5 y con CSS3 se pueda lograr hacer esto de una forma MUCHISIMO MAS SIMPLE, no entiendo como estas cosas pueden ser tan molestas para hacer, cuando deberia ser algo mucho mas sencillo.

EDIT: Ah y me olvide de mencionar, tambien esta la solucion con tablas, esta bien... son obsoletas las tablas, pero hasta el dia de hoy no me queda bien claro el porque la discriminacion a las tablas...
  #5 (permalink)  
Antiguo 22/06/2011, 23:21
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Hola ciel. en eficacia no se que es mejor, son distintos. No se que margen ves en mi modificación. si quité el margen derecho de la ultima columna con una clase.

La idea de tredio seguramente era poner width:430px; al .content y con overflow:hidden; tapar los 10px de margen sobrante. Me parece muy válida la idea. Entiendo que prefiere crear un contenedor más a colocar una clase a la cuarta columna. Lo que llevado a un listado de una galería de imágenes tiene mucho sentido.

Yo en cambio saco el .content y añado clases a la cuarta columna. esa es la diferencia digamos.

Sobre porque usa float: pon a .content width:430px; y lo verás.

Saludos.
  #6 (permalink)  
Antiguo 23/06/2011, 06:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 11 meses
Puntos: 538
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

¿Y si vamos un paso más allá?
Caja contenedora de tamaño desconocido. Puede estar definido en %, por ejemplo.
Número de cajas contenidas (las de borde rojo) variable y tamaño variable en función del contenido (frase más o menos larga).
Definiendo una sola clase para las contenidas.

Está claro que hay que prescindir de flotados y márgenes para que con independencia del número y tamaño siempre haya una distribución homogénea y centrada.

Ese es el planteamiento.

Ahora no puedo limpiar los códigos. Pero sí os doy un par de ideas en forma de propiedades:
text-align y letter-spacing.
  #7 (permalink)  
Antiguo 23/06/2011, 08:58
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 6 meses
Puntos: 66
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

puedes quitarle el float al .wraper (realmente no tiene mucho sentido), quedaria algo asi:

http://jsfiddle.net/tredio/N9TVq/5/


en cuanto al planteamiento de kseso? no se si realmente podria ser algo asi:

http://jsfiddle.net/tredio/aeCgJ/
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #8 (permalink)  
Antiguo 23/06/2011, 11:29
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Hola kseso, espero por ese código, me intriga saber que harás con letter-spacing, seguramente se me ocurrirán otras preguntas para hacerte, en principio como trabajaremos los elementos de bloque anidados a elementos de línea ya que si hacemos columnas es para meterle contenido, es decir, que truco tienes para esto y que permita se lleve a la práctica sin problemas.

El ancho del contenedor, originalmente, debía contener n columnas con medianiles internos pero "a sangre" en sus bordes (margin:x 0;) por lo tanto esto me parece imposible solo con css para el ejemplo que planteas.

Saludos.
  #9 (permalink)  
Antiguo 24/06/2011, 05:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 11 meses
Puntos: 538
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Es básicamente la idea que apuntó Tredio. Con alguna cosilla diferente.

Esto podría ser (tres realizaciones distintas en base a la misma idea):

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" lang="es-es">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5. <style type="text/css">
  6.  * {
  7.     margin: 0;
  8.     padding: 0;
  9.     border: 0;
  10.     outline: 0;
  11.   }
  12. html, body {
  13.   font-weight:normal;
  14.   font-size: 100%;
  15.   height:100%;
  16.   width: 100%;
  17.   background: #F5DCB3;
  18.   }
  19. .contenedor{
  20.   width: 80%;
  21.   margin: 0 auto 20px;
  22.   background: #435266;
  23.   padding-bottom: 10px;
  24. }
  25.  
  26. h1, h2 {
  27.     line-height: 1em;
  28.     font-family: Arial, sans-serif;
  29.     text-align: center;
  30.     padding: 10px;
  31.     color: #f5f5f5;
  32. }
  33. .contenedor p {color: #f5f5f5;}
  34. .padre {
  35.     background: #aaa;
  36.     text-align: center;
  37.     white-space: nowrap;
  38.     font-size: 20px;
  39.     letter-spacing: 20px;
  40.     line-height: 12px;
  41.     overflow: hidden;
  42.     padding: 10px 0;
  43. }
  44.  
  45. .hijo {
  46.     background: #F5DCB3;
  47.     display: inline-block;
  48.     letter-spacing: normal;
  49.     font-size: normal;
  50.     white-space: normal;
  51.     text-align: normal;
  52.     vertical-align: middle;
  53.     border: 1px solid #fff;
  54. }
  55. .hijo p {
  56.   color: #444;
  57.     font-family: Arial, sans-serif;
  58.     font-size: 12px;
  59.     line-height: 1.5em;
  60.     text-align: left;
  61.     padding: 5px;
  62. }
  63. .hijo img {width:100px;}
  64. #segundo {
  65.   letter-spacing:20px;
  66.   margin:0 auto;
  67.   padding:0;
  68.   white-space:normal;
  69.   width:40%;
  70. }
  71.  
  72. #tercero {
  73.   margin:0 auto;
  74.   overflow:auto;
  75.   width:90%;
  76.   letter-spacing: 10px;
  77. }
  78. #segundo .hijo {margin: 10px 0;width: 100px; height: 100px;}
  79. #tercero .hijo {margin: 10px 0;width: 100px;vertical-align: bottom;}
  80.       /****************
  81.       un par de declaraciones para el inombrable,
  82.       que en un proyecto real irían en su CC
  83.       ***************/
  84. .hijo, #segundo .hijo {
  85.     *display: inline;
  86.     *margin: 10px;
  87. }
  88. #tercero {*height: 120px;}
  89. </head>
  90.  
  91. <div class="contenedor">
  92.  
  93. <h1>"Centrar al Centro" Divs Conjuntamente</h1>
  94. <p>O cómo distribuir elementos equitativamente, con independencia de su número o tamaño. En vez de utilizar div´s aplica a una lista y tienes el típico menú dinámico (opciones variables) centrado</p>
  95.  
  96. <div class="padre">
  97.     <div class="hijo">
  98.     <p>Una caja con algo de texto.</p>
  99.     </div>
  100.  
  101.     <div class="hijo">
  102.     <img src="estilos/pict132.jpg" alt="img" />
  103.     <p>Imagen y texto</p>
  104.     </div>
  105.  
  106.     <div class="hijo">
  107.     <img src="estilos/pavo.jpg" alt="img" />
  108.     </div>
  109.  
  110.     <div class="hijo">
  111.     <img src="estilos/pict083.jpg" alt="img" />
  112.     <p>Otro div</p>
  113.     </div>
  114.    
  115.     <div class="hijo">
  116.     <p>+ ó - cajas. El centrado se mantiene.</p>   
  117.     </div>
  118. </div>
  119.  
  120. <p>Podemos incluir alguna variación en las propiedades de .padre, añadiendo un id (#segundo) para hacer la típica galería con distribución homogénea</p>
  121.  
  122. <div id="segundo" class="padre">
  123.     <div class="hijo">
  124.     <p>Una caja con texto.</p>
  125.     </div>
  126.  
  127.     <div class="hijo">
  128.     <img src="estilos/pict132.jpg" alt="img" />
  129.     </div>
  130.  
  131.     <div class="hijo">
  132.     <img src="estilos/pavo.jpg" alt="img" />
  133.     <p>Más divs</p>
  134.     </div>
  135.  
  136.     <div class="hijo">
  137.     <img src="estilos/pict083.jpg" alt="img" />
  138.     <p>Otro div</p>
  139.     </div>
  140.    
  141.     <div class="hijo">
  142.     <p>Añade o quita cajas. El centrado se mantiene.</p>   
  143.     </div>
  144.     <div class="hijo">
  145.     <img src="estilos/pict141.jpg" alt="img" />
  146.     <p>Otro div</p>
  147.     </div> 
  148. </div>
  149.  
  150. <p>Incluso, en base al primero, una galería con su escroll:</p>
  151.  
  152. <div id="tercero" class="padre">
  153.     <div class="hijo">
  154.     <img src="estilos/sumario.jpg" alt="img" />
  155.     </div>
  156.  
  157.     <div class="hijo">
  158.     <img src="estilos/pict132.jpg" alt="img" />
  159.     <p>Imagen y texto</p>
  160.     </div>
  161.  
  162.     <div class="hijo">
  163.     <img src="estilos/pavo.jpg" alt="img" />
  164.     <p>Más divs</p>
  165.     </div>
  166.  
  167.     <div class="hijo">
  168.     <img src="estilos/pict083.jpg" alt="img" />
  169.     <p>Otro div</p>
  170.     </div>
  171.    
  172.     <div class="hijo">
  173.     <img src="estilos/pict083.jpg" alt="img" />
  174.     <p>Otro div</p>
  175.     </div>
  176.    
  177.     <div class="hijo">
  178.     <p>Una caja con algo de texto.</p>
  179.     </div>
  180.  
  181.     <div class="hijo">
  182.     <img src="estilos/pict083.jpg" alt="img" />
  183.     <p>Otro div</p>
  184.     </div>
  185.  
  186.     <div class="hijo">
  187.     <img src="estilos/pict083.jpg" alt="img" />
  188.     <p>Otro div</p>
  189.     </div>
  190.  
  191.     <div class="hijo">
  192.     <img src="estilos/pict083.jpg" alt="img" />
  193.     <p>Otro div</p>
  194.     </div>
  195.    
  196.     <div class="hijo">
  197.     <img src="estilos/pict083.jpg" alt="img" />
  198.     <p>Otro div</p>
  199.     </div>
  200. </div>
  201. </div>
  202. </body>
  203. </html>

Creo que no hay mucho que explicar. Sólo que al usar letter-spacing (en .padre) para separar los .hijo evitamos tener que andar definiendo diferentes márgenes para el primero/último.
  #10 (permalink)  
Antiguo 24/06/2011, 14:02
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 6 meses
Puntos: 18
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Son interesantes tus planteos kseso? Pero con el método que planteas no logras una distribución uniforme con respecto al contenedor padre. y creo que ese era el objetivo principal.

Con tu solucion solo estas centrando los elementos hijos con la propiedad text-align: center; en el elemento padre y el display:inline-block; a los hijos. Me animo a decir que obtendrías el mismo resultado tan solo con estas propiedades y un margin en los elementos hijos. Sin necesidad de ningún letter-spacin y demas propiedades.

tredio resolvió este tema en foma similar a mi la ultima vez. Pero lógico depende de los tamaños. ¿En ralidad podríamos lograr una independencia completa solo con CSS?
__________________
http://www.ignacionieva.com.ar
  #11 (permalink)  
Antiguo 24/06/2011, 14:23
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 6 meses
Puntos: 18
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Y usando text-align:justify; ???

Seguro esta todavia no es la solucion pero quizas este un poquitito mas cerca...

CSS
Código:
	#padre{
	width:900px;
	margin:auto;
	border:1px solid #000;
	text-align:justify;
	padding:0 20px 20px 20px;
	}

	 
	.hijo{
	width: 140px;
	height: 105px;
	border:1px solid #000;
	display:inline-block;
	margin-top:20px;
	}
	  
	.distinto{width:50px;}

HTML
Código:
<div id="padre" >
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo distinto">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo distinto">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo distinto">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
		<div class="hijo">texto</div>
</div>
__________________
http://www.ignacionieva.com.ar
  #12 (permalink)  
Antiguo 24/06/2011, 14:39
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 6 meses
Puntos: 18
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Me retacto a mi mismo. jaja... text-align:justify; necesita simpre que se genere una nueva linea para justificar la anterior.
__________________
http://www.ignacionieva.com.ar
  #13 (permalink)  
Antiguo 24/06/2011, 15:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Sin dudas muy interesante tu propuesta kseso.
  #14 (permalink)  
Antiguo 25/06/2011, 07:35
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 6 meses
Puntos: 18
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Solo para demostrar que no estoy loco. Va no se...

Revisen este código en base a las ideas de kseso?. Distribuye uniformemente un número desconocido de divs de tamaños desconocidos en un contenedor también de tamaño desconocido.


Código:
<!DOCTYPE html>
<html lang="es-AR">
<head>
<title>Ejemplo</title>
	
<style>

	.padre{
	width:90%;
	margin:auto;
	border:1px solid #000;
	text-align:justify;
	padding:0 20px;
	line-height:20px;
	}
		 
	.hijo{
	width: 150px;
	border:1px solid #000;
	display:inline-block;
	vertical-align:top;
	margin-top:20px;
	text-align:left;
	line-height:normal;
	}

	.padre:after{
	content:" .";
	visibility:hidden;
	letter-spacing:9999px;
	vertical-align:bottom;
	}
  
</style>

	
</head>
<body>


<p>Ejemplo 1</p>

<div class="padre" >
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
</div>


<p>Ejemplo 2</p>

<div class="padre" >
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
</div>


<p>Ejemplo 3</p>

<div class="padre" >
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
		<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
</div>


</body>
</html>
Saludos!
__________________
http://www.ignacionieva.com.ar

Última edición por inieva; 25/06/2011 a las 07:42
  #15 (permalink)  
Antiguo 25/06/2011, 10:00
Avatar de spider_boy  
Fecha de Ingreso: diciembre-2003
Ubicación: Chile
Mensajes: 1.855
Antigüedad: 13 años, 5 meses
Puntos: 88
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Podrías utilizar la pseudo-clase :last-child de CSS3

Código CSS:
Ver original
  1. #div_padre > div:last-child {
  2.    margin-right: 0;
  3. }

Así le quitarías el margin-right solo al último div hijo.

Para más info : http://www.w3.org/TR/css3-selectors/#last-child-pseudo
__________________
Nunca te olvidaré mi negra hermosa. Te extraño demasiado.
  #16 (permalink)  
Antiguo 25/06/2011, 18:40
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 6 años, 10 meses
Puntos: 5
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Cita:
Iniciado por spider_boy Ver Mensaje
Podrías utilizar la pseudo-clase :last-child de CSS3

Código CSS:
Ver original
  1. #div_padre > div:last-child {
  2.    margin-right: 0;
  3. }

Así le quitarías el margin-right solo al último div hijo.

Para más info : http://www.w3.org/TR/css3-selectors/#last-child-pseudo
ESA es una de las ideas que se me ocurrio al principio para no usar tanto codigo y una clase de mas al ultimo div.... pero yo como al no haber usado nunca lo de pseudo clase no sabia bien como hacerlo... interesante lo que me pasaste.

Igual, me marie un poco... al final, cual seria la mejor forma de lograr esto entonces? porque veo que hay muchas formas de hacerlo, ya de por si yo sabia varias... pero justamente lo que estoy buscando con este thread es saber cual seria la forma mas correcta.

Lo que puedo decir es que la forma mas SIMPLE es esta ultima que dijo spider_boy, no lleva nada de tiempo en hacerla, es re cortita y demas... pero es la mejor?

EDIT: kseso? Te pediria un favor, podrias subir un demo o pasarme el archivo .html para descargar? Es que estoy teniendo un problemita al copiar el codigo.... me lo pega con caracteres raros.

Última edición por Ciel; 25/06/2011 a las 20:14
  #17 (permalink)  
Antiguo 25/06/2011, 20:18
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Sin dudas que es interesante la propuesta de spider_boy, aunque para un listado de una galeria de imagenes por ejemplo (fila de n columnas * m filas) no podría llevarse a la práctica.

Por lo tanto para mi, cuando listemos registros, sigue siendo la mejor opción generar una clase el bucle (while, foreach, etc) cada n iteraciones y quitar el margin en esta clase.
También podría usarse la primer propuesta de tredio aunque si trabajamos con plugins como colorbox, lightbox, etc. tendriamos que entrar en el código javascript del plugin para añadir los elementos extra, lo que hace que en la práctica complique más de lo que aporta.

Para casos estáticos en los que tenemos el control de la cantidad de columnas y filas, me quedo con la primer propuesta de tredio, ya que con un simple contenedor y overflow resolvemos el problema.

Sobre la propuesta de kseso, me parece extraordinaria como punto de partida para experimentar sobre maquetas líquidas, pero debería jugar más con ese código para dar una opinión seria, de momento lo veo como una solución para el centrado de elementos flotados para los navegadores que no soportan float:center, o sea, la mayoría, por ejemplo para cuando tenemos que hacer un paginador de n items.

Espero te sea útil mi humilde punto de vista.
  #18 (permalink)  
Antiguo 02/07/2011, 02:26
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 6 años, 10 meses
Puntos: 5
Respuesta: Centrar varios objetos alineados PERFECTAMENTE

Acabo de probar el ultimo codigo de inieva y me resulto bastante util. Sin embargo tengo una duda.... probe borrando ciertas lineas del css y me di cuenta que no modificaban en nada al resultado... como por ejemplo: line-height:20px; vertical-align:top; line-height:normal; vertical-align:bottom;

Los fui borrando y fui probando si afectaba al resultado... y vi que nada. Pero por si las dudas lo pregunto aca, porque quizas fixean cosas para el IE o navegadores que no soportan ciertas cosas, o directamente no tienen ninguna utilidad y las puedo borrar sin problema?

EDIT: Ah y..... no habria una forma para que cuando haya solo 2 elementos en una fila, no se le aplique este efecto? O que quede de alguna forma "linda"?

Me refiero a esto:



La verdad que queda muy mal los ultimos 2.... uno en cada punta. Como se les ocurre que se pueda solucionar esto? Gracias de antemano.

Última edición por Ciel; 02/07/2011 a las 02:42

Etiquetas: objetos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:46.