Como centrar tres capas que tiene un float:left

rith · #1 (**permalink**) 14/03/2008, 10:06

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...

ArturoGallegos · #2 (**permalink**) 14/03/2008, 12:26

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

Mikmoro · #3 (**permalink**) 14/03/2008, 13:27

Cita:

Iniciado por rith

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.

rith · #4 (**permalink**) 14/03/2008, 13:32

Cita:

Iniciado por Ag666

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...

ArturoGallegos · #5 (**permalink**) 14/03/2008, 19:41

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

rith · #6 (**permalink**) 17/03/2008, 13:20

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 ....

farve · #7 (**permalink**) 19/03/2008, 13:04

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.

Mikmoro · #8 (**permalink**) 19/03/2008, 16:13

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.

azazels · #9 (**permalink**) 02/06/2010, 01:38

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 :)

Shawty · #10 (**permalink**) 02/06/2010, 02:03

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!

Shawty · #11 (**permalink**) 02/06/2010, 02:15

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>

azazels · #12 (**permalink**) 02/06/2010, 02:36

Cita:

Iniciado por Shawty

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...

Shawty · #13 (**permalink**) 02/06/2010, 02:42

azazels lee mi último post :P

azazels · #14 (**permalink**) 02/06/2010, 02:52

Cita:

Iniciado por Shawty

azazels lee mi último post :P

jaajajaj, si si, estaba probándolo y efectivamente FUNCIONA en IE7, GRACIAS!!!!

alexk · #15 (**permalink**) 02/06/2010, 09:01

Cita:

Iniciado por azazels

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