Foros del Web » Creando para Internet » CSS »

centrar div?

Estas en el tema de centrar div? en el foro de CSS en Foros del Web. hola esta pregunta debe ser bien comun en el foro.. he visto varios tutos pues como centro un div vertical y horizontalmente si mi contenedor ...
  #1 (permalink)  
Antiguo 25/04/2010, 12:48
 
Fecha de Ingreso: septiembre-2005
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Pregunta centrar div?

hola esta pregunta debe ser bien comun en el foro.. he visto varios tutos

pues como centro un div vertical y horizontalmente

si mi contenedor mide 700x600px

espero que me puedan ayudar gracias

Última edición por crack16; 26/04/2010 a las 11:27
  #2 (permalink)  
Antiguo 25/04/2010, 13:10
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: centrar div?

margin: 0 auto;
--------------------
Antes de preguntar FAQ/s de CSS
  #3 (permalink)  
Antiguo 25/04/2010, 14:45
 
Fecha de Ingreso: septiembre-2005
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: centrar div?

yo estoy usando estos stilos

position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -150px;

overflow: auto;
border: 1px solid red;

pero cuando coloco las medidas de mi imagen q son 700 x 600px. no se llega a centrar
  #4 (permalink)  
Antiguo 26/04/2010, 07:36
 
Fecha de Ingreso: abril-2005
Mensajes: 38
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: centrar div?

Amigo, es como te comentaron:

margin: 0 auto;

tienes que sacar los márgenes que tienes en este momento para que te funcione.
  #5 (permalink)  
Antiguo 26/04/2010, 09:02
 
Fecha de Ingreso: septiembre-2005
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Pregunta Respuesta: centrar div?

osea quedaria asi:

position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 600px;
margin-top: 0px;
margin-left: 0px;
  #6 (permalink)  
Antiguo 26/04/2010, 10:32
 
Fecha de Ingreso: abril-2005
Mensajes: 38
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: centrar div?

Así:

position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 600px;
margin: 0 auto;
  #7 (permalink)  
Antiguo 26/04/2010, 10:49
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: centrar div?

position: absolute;
left: 50%;
top: 50%;

width: 700px;
height: 600px;
margin: 0 auto;
  #8 (permalink)  
Antiguo 26/04/2010, 11:26
 
Fecha de Ingreso: septiembre-2005
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Pregunta Respuesta: centrar div?

...no es q dudando..pero no se si me habran entendido



lo q quiero es centrar mi div vertical y horizontalmente en medio de la pagina
  #9 (permalink)  
Antiguo 26/04/2010, 11:30
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: centrar div?

Verifica en esta página tiene muchos ejemplo de como lograr lo que estás pidiendo http://araudi.net/
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #10 (permalink)  
Antiguo 26/04/2010, 11:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: centrar div?

Buenas, para centrar horizontalmente haz como ye han comentado, margin: 0 auto; para centrar vertical añade position: relative; y top:50%; . El 50% lo deberás variar (disminuyéndolo) hasta que te quede correctamente centrado.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #11 (permalink)  
Antiguo 26/04/2010, 12:02
 
Fecha de Ingreso: septiembre-2005
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: centrar div?

enserio muchas gracias x todo . pero no llego a centrar mi div de 700 x 600 px..

Estoy tratando desde ayer. he visto varios tutos. pero no lo llega a salir.. espero que alguien me pueda ayudar-


gracias
  #12 (permalink)  
Antiguo 26/04/2010, 12:15
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: centrar div?

Si no nos muestras el código que tienes hasta ahora y en lo que falla, en poco te podemos ayudar.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #13 (permalink)  
Antiguo 26/04/2010, 15:24
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: centrar div?

Habrá visitado el enlace que le dí. Allí hay 4 ejemplos de como centrar verticalmente y horizontalmente. O estará esperando que le hagamos el trabajo
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #14 (permalink)  
Antiguo 26/04/2010, 17:04
 
Fecha de Ingreso: septiembre-2005
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: centrar div?

Si lo vi amigo... y gracias x esa web sacare varios ejemplos

bueno llegue a resolverlo con un amigo

y esto fue lo que me dijo que ponga

Código CSS:
Ver original
  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5. #principal {
  6. position:absolute;
  7. width:700px;
  8. height:600px;
  9. margin:-300px 0 0 -350px;
  10. left:50%;
  11. top:50%;
  12. display:block;
  13. }

pero yo queria que me expliquen esos estilos para yo poder hacerlo solo

gracias

PD: aca esta el code del index

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script type="text/javascript" src="js/swfobject.js"></script>
  5.  
  6. <title>BEBEK PERÚ. El Papel del Bebé en la alimentación</title>
  7. <meta name="google-site-verification" content="ZsxomNCYbYYk_sL4ZRDDMRLEgYBCdVHB_LuurxjWtWw" />
  8. <link href="css/stilo.css" rel="stylesheet" type="text/css" />
  9.  
  10. </head>
  11.  
  12. <div id="principal">
  13.  
  14. </div>
  15.  
  16. <script type="text/javascript">
  17.  
  18.    var so = new SWFObject("swf/index_contru.swf", "index_contru", "700", "600", "9");
  19.  
  20.    so.write("principal");
  21.    </script>
  22.  
  23. <script type="text/javascript">
  24. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  25. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  26. <script type="text/javascript">
  27. try {
  28. var pageTracker = _gat._getTracker("UA-16071892-1");
  29. pageTracker._trackPageview();
  30. } catch(err) {}</script>
  31.  
  32. </body>
  33. </html>

Última edición por crack16; 26/04/2010 a las 17:10
  #15 (permalink)  
Antiguo 26/04/2010, 17:17
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: centrar div?

Lee este manual http://librosweb.es/css/index.html
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #16 (permalink)  
Antiguo 27/04/2010, 03:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: centrar div?

Hola:

Aquí tienes otro ejemplo: http://www.csslab.cl/2007/01/12/cent...tical-con-css/

Saludos.


Etiquetas: Ninguno
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 15:23.