Foros del Web » Creando para Internet » CSS »

Como centrar tres capas que tiene un float:left

Estas en el tema de Como centrar tres capas que tiene un float:left en el foro de CSS en Foros del Web. Mi pregunta es como puedo centrar 3 capas que estan detro de otra capa y las tres estan float:left pero necesito estas tres capas que ...
  #1 (permalink)  
Antiguo 14/03/2008, 11:06
 
Fecha de Ingreso: febrero-2008
Mensajes: 31
Antigüedad: 9 años, 10 meses
Puntos: 0
De acuerdo Como centrar tres capas que tiene un float:left

Mi pregunta es como puedo centrar 3 capas que estan detro de otra capa y las tres estan float:left pero necesito estas tres capas que se presenten centradas o no se como ponerlas a la par las tres y que queden en medio de un espacio....????

Gracias...
  #2 (permalink)  
Antiguo 14/03/2008, 13:26
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Re: Como centrar tres capas que tiene un float:left

haber tio no se si te entiendo bien pero va... hay muchas formas pero no me gusta complicarme asi que lo que tu dice io lo haria asi

<style type="text/css">div{border:1px #FF0000 dotted;text-align:left;}</style>
<center><div style="width:300px;">
<div style="width:99px; float:left;">asdasd</div>
<div style="width:99px; float:left;">dasdas</div>
<div style="width:99px; float:left;">adasd</div>
</div>


bien te explico rapido
*antes del primer div pongo el centrado <center> (el 4º div k kontines los otros 3)
* en el style defino que el texto va a la izq
*a los 3 div internos doy un ancho que sumados los 3 es un poco inferior al div principal (4º)
eso es para que no desborde y te mande un div debajo del otro

mmm talves no el mejor metodo pero funciona y no me complico la vida
  #3 (permalink)  
Antiguo 14/03/2008, 14:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Como centrar tres capas que tiene un float:left

Cita:
Iniciado por rith Ver Mensaje
Mi pregunta es como puedo centrar 3 capas que estan detro de otra capa y las tres estan float:left pero necesito estas tres capas que se presenten centradas o no se como ponerlas a la par las tres y que queden en medio de un espacio....????

Gracias...
Hola. rith.
No sé muy bien para qué lo quieres ni qué quieres hacer, pero igua esta idea te sirve para adaptarla o comenzar a investigar

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Plantilla</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
#padre {
width: 420px;
margin: 0px auto;
border: solid 1px #000;
}
#uno, #dos, #tres {
width: 100px;
margin-left: 30px;
float: left;
height: 100px;
}
#uno{
background-color: #123;
margin-left: 30px!important;
margin-left: 15px;
}
#dos{
background-color: #456;
}
#tres{
background-color: #789;
}
.corte {
clear: both;
}
</style>
</head>
<body>
<div id="padre">
<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
<div class="corte" />
</div>
</body>
</html>
Mikel.
  #4 (permalink)  
Antiguo 14/03/2008, 14:32
 
Fecha de Ingreso: febrero-2008
Mensajes: 31
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Como centrar tres capas que tiene un float:left

Cita:
Iniciado por Ag666 Ver Mensaje
haber tio no se si te entiendo bien pero va... hay muchas formas pero no me gusta complicarme asi que lo que tu dice io lo haria asi

<style type="text/css">div{border:1px #FF0000 dotted;text-align:left;}</style>
<center><div style="width:300px;">
<div style="width:99px; float:left;">asdasd</div>
<div style="width:99px; float:left;">dasdas</div>
<div style="width:99px; float:left;">adasd</div>
</div>


bien te explico rapido
*antes del primer div pongo el centrado <center> (el 4º div k kontines los otros 3)
* en el style defino que el texto va a la izq
*a los 3 div internos doy un ancho que sumados los 3 es un poco inferior al div principal (4º)
eso es para que no desborde y te mande un div debajo del otro

mmm talves no el mejor metodo pero funciona y no me complico la vida
Me parece la idea men solo que fijage que el div de en medio crece indefinidamente pero no tanto bueno entoces e ahi mi problema... Pero muchas gracias...
  #5 (permalink)  
Antiguo 14/03/2008, 20:41
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Re: Como centrar tres capas que tiene un float:left

mmmmm no entiendo por que tenga que crecer indefinidamente amenos que tu texto lo pongas en una sola linea sin espacion ni nada ejem.: "asadsdsdsdadsdasdasdsdadasdsdasdsadsdasdsssssssss sssssssssssssssssssssssssssssssssssssssssss"

jajaj bueno esa seria la unica situacion en la que e visto que pasa eso que mencionas

pero bueno aver si compartes el codigo que estas usando para ver que es lo que pasa

si ya lo resolviste postea tu solucion
  #6 (permalink)  
Antiguo 17/03/2008, 14:20
 
Fecha de Ingreso: febrero-2008
Mensajes: 31
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Como centrar tres capas que tiene un float:left

Hola aun no tengo la solucion con capas pero como tube que entregar la web hice una algo poco profecional ocupe una tabla voy a dejar el link talvez yo lo estoy haciendo mal y hay una mejor idea soy nuevo con CSS y aun me cuesta apriendo un poco todos los dias pero gracias:

http://bolproes.com/nuevo/?cat=1016

es en la parte de la paginacion de las img la cantida de imagenes puede crecer un poco
y eso me estiraria el div de enmedio o quizas existe otra idea y yo lo hice mal ....
  #7 (permalink)  
Antiguo 19/03/2008, 14:04
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 12 años, 9 meses
Puntos: 1
Re: Como centrar tres capas que tiene un float:left

hola. yo tambien necesito lo mismo pero el problema que tengo es que el "elemento padre" que es una capa no tiene un ancho fijo, sino que es el 80% del body.

Aqui puse un post

Imaginemos que tenemos una capa de 800px, y dentro 9 capas con cada una una imagen de 175px de largo.

todas con float left.

En la primeta y segunda "fila" entrarian 4 imagenes. Y sobrarian 100px. En la 3ª "fila" quedaria una unica capa-imagen. (sobran 625px)

Como hacer para que en la 1ª y 2ª fila esos 100px se repartan, y en la 3ª la imagen quede en medio.


Pero el tema es que tiene que funcionar por ejemplo con una resolucion diferente, p.ej 1280 en la que el body serian 1024px: entrarian 5 en la 1ª y 4 en la 2ª pero los quiero CENTRADOS!!!

Espero que me sepais contestar.
  #8 (permalink)  
Antiguo 19/03/2008, 17:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Como centrar tres capas que tiene un float:left

Si son sólo fotos es fácil.
Mira este código:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor { border: 1px solid rgb(0, 0, 0);
margin: 0px auto;
width: 80%;
text-align: center;
}
.caja { width: 175px;
display: inline;
margin-left: 10px;
}
.corte { clear: both;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
<div class="caja"><img src="img/calendario.jpg" /></div>
</div>
</body>
</html>
Sustituye la imagen por una tuya. Aquí te pongo un ejemplo para verlo.

http://www.araudi.net/fotos_centradas.html

Mikel.
  #9 (permalink)  
Antiguo 02/06/2010, 02:38
 
Fecha de Ingreso: mayo-2006
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Como centrar tres capas que tiene un float:left

hola!
rescato este hilo porque es lo que necesito hacer.
tengo un div "padre" de dimensiones X de ancho (alto automatico) y dentro voy a tener varias "divs" (es contenido dinámico y pueden ser 2, 3 o 15).

quisiera que los divs dentro del div "padre" esté centrado, así como en esta imagen:
[URL=http://img7.imageshack.us/i/22478443.jpg/][IMG]http://img7.imageshack.us/img7/4995/22478443.jpg[/IMG][/URL]

sin embargo, lo que consigo es esto:
[URL=http://img443.imageshack.us/i/malty.jpg/][IMG]http://img443.imageshack.us/img443/9215/malty.th.jpg[/IMG][/URL]

gracias :)
  #10 (permalink)  
Antiguo 02/06/2010, 03:03
 
Fecha de Ingreso: mayo-2010
Mensajes: 27
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Como centrar tres capas que tiene un float:left

Se me ocurre que el elemento padre este con float:left; + text-align:center; y tamaño fijo.

Luego los divs de dentro del padre tengan un display:inline-block ( y sus respectivos tamaños que se supone que sera siempre el mismo).


No me queda claro que esto que te cuento funcione en ie6 o incluso en ie7... habría luego que profundicar en ellos, xo bueno pruébalo con esto a ver que tal va :)


Saludos!
  #11 (permalink)  
Antiguo 02/06/2010, 03:15
 
Fecha de Ingreso: mayo-2010
Mensajes: 27
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Como centrar tres capas que tiene un float:left

Me he tomado la libertad de hacer alguna prueba y he conseguido que funcione :P

Provadlo siguiendo éste código o sinó haced un html aparte y copiar y pegad esto:

Código HTML:
<style>
.padre{
	margin:0 auto;
	width:660px;
	text-align:center;
	background:lightblue;
	padding:50px;
}
.cuadro{
	width:100px;
	height:100px;
	display:inline-block;
	background:red;
	margin-left:5px;
	margin-bottom:5px;
}
</style>
<div class="padre">
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
    <span class="cuadro"></span>
</div> 
  #12 (permalink)  
Antiguo 02/06/2010, 03:36
 
Fecha de Ingreso: mayo-2006
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Como centrar tres capas que tiene un float:left

Cita:
Iniciado por Shawty Ver Mensaje
Se me ocurre que el elemento padre este con float:left; + text-align:center; y tamaño fijo.

Luego los divs de dentro del padre tengan un display:inline-block ( y sus respectivos tamaños que se supone que sera siempre el mismo).


No me queda claro que esto que te cuento funcione en ie6 o incluso en ie7... habría luego que profundicar en ellos, xo bueno pruébalo con esto a ver que tal va :)

Saludos!
efectivamente, funciona en Safari y Firefox, pero en IE7 nop :(

gracias de todos modos, tendré que seguir investigando...
  #13 (permalink)  
Antiguo 02/06/2010, 03:42
 
Fecha de Ingreso: mayo-2010
Mensajes: 27
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Como centrar tres capas que tiene un float:left

azazels lee mi último post :P
  #14 (permalink)  
Antiguo 02/06/2010, 03:52
 
Fecha de Ingreso: mayo-2006
Mensajes: 10
Antigüedad: 11 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Como centrar tres capas que tiene un float:left

Cita:
Iniciado por Shawty Ver Mensaje
azazels lee mi último post :P
jaajajaj, si si, estaba probándolo y efectivamente FUNCIONA en IE7, GRACIAS!!!!
  #15 (permalink)  
Antiguo 02/06/2010, 10:01
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Como centrar tres capas que tiene un float:left

Cita:
Iniciado por azazels Ver Mensaje
hola!
rescato este hilo porque es lo que necesito hacer.
es mejor crear temas nuevos para dudas nuevas en vez de revivir temas antiguos (2 años) que lo deja muy clarito el letrero en rojo que parece abajo de la pagina
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 14:01.