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, como puedo hacer para que la web se me centre en todas las resoluciones..?? por que estoy usando la etiqueta center, y aling: center; ...
  #1 (permalink)  
Antiguo 06/06/2010, 14:53
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
centrar div

Hola, como puedo hacer para que la web se me centre en todas las resoluciones..??

por que estoy usando la etiqueta center, y aling: center; etc...

y nada no se me cuadra :S

aqui el codigo css por si se necesita ver:

Código CSS:
Ver original
  1. img.avatar{width: 50px; height: 50px;}
  2.  
  3. body {align:center;}
  4.  
  5.  
  6.  
  7. .enlace_imagen img {border:0}
  8.  
  9. .boton{
  10.   background-image:url(iniciar-sesion.png);
  11.   background-repeat:no-repeat;
  12.   height:21px;
  13.   width:102px;
  14.   background-position:center;
  15. }
  16.  
  17. #Layer-1 {
  18.   position: absolute;
  19.   left: +2px;
  20.   top: +2038px;
  21.   width: 1003px;
  22.   height: 31px;
  23.   z-index: 1;
  24.   background:url(pie-de-paguina.png);
  25. }
  26.  
  27. #Layer-2 {
  28.   position: absolute;
  29.   left: +831px;
  30.   top: +226px;
  31.   width: 160px;
  32.   height: 216px;
  33.   z-index: 2;
  34.   background:url(categorias.png);
  35. }
  36.  
  37.  
  38. #Layer-3 {
  39.   position: absolute;
  40.   left: +11px;
  41.   top: +905px;
  42.   width: 788px;
  43.   height: 222px;
  44.   z-index: 3;
  45.   background:url(contenido.png);
  46. }
  47.  
  48. #Layer-4 {
  49.   position: absolute;
  50.   left: +11px;
  51.   top: +1463px;
  52.   width: 788px;
  53.   height: 222px;
  54.   z-index: 4;
  55.   background:url(contenido.png);
  56. }
  57.  
  58. /* You named this layer Forma 32 copia 5 */
  59. #Layer-5 {
  60.   position: absolute;
  61.   left: +11px;
  62.   top: +1747px;
  63.   width: 788px;
  64.   height: 222px;
  65.   z-index: 5;
  66.   background:url(contenido.png);
  67. }
  68.  
  69. /* You named this layer Forma 32 copia 3 */
  70. #Layer-6 {
  71.   position: absolute;
  72.   left: +11px;
  73.   top: +1183px;
  74.   width: 788px;
  75.   height: 222px;
  76.   z-index: 6;
  77.   background:url(contenido.png);
  78. }
  79.  
  80. /* You named this layer Forma 32 */
  81. #Layer-7 {
  82.   position: absolute;
  83.   left: +10px;
  84.   top: +622px;
  85.   width: 788px;
  86.   height: 222px;
  87.   z-index: 7;
  88.   background:url(contenido.png);
  89. }
  90.  
  91. /* You named this layer Forma 32 copia */
  92. #Layer-8 {
  93.   position: absolute;
  94.   left: +11px;
  95.   top: +225px;
  96.   width: 788px;
  97.   height: 222px;
  98.   z-index: 8;
  99.   background:url(contenido.png);
  100. }
  101.  
  102. /* You named this layer Forma 34 */
  103. #Layer-9 {
  104.   position: absolute;
  105.   left: +830px;
  106.   top: +465px;
  107.   width: 162px;
  108.   height: 1547px;
  109.   z-index: 9;
  110.   background:url(publiidad.png);
  111. }
  112.  
  113. /* You named this layer Tope Derecha */
  114. #Layer-10 {
  115.   position: absolute;
  116.   left: +1004px;
  117.   top: +0px;
  118.   width: 2px;
  119.   height: 2069px;
  120.   z-index: 10;
  121.   background:url(tope.png);
  122. }
  123.  
  124. /* You named this layer Tope Izquierda */
  125. #Layer-11 {
  126.   position: absolute;
  127.   left: +0px;
  128.   top: -1px;
  129.   width: 2px;
  130.   height: 2070px;
  131.   z-index: 11;
  132.   background:url(tope.png);
  133.  
  134. }
  135.  
  136. /* You named this layer Pestaa */
  137. #Layer-12 {
  138.   position: absolute;
  139.   left: +2px;
  140.   top: +0px;
  141.   width: 1002px;
  142.   height: 169px;
  143.   z-index: 12;
  144.   background:url(encabezado.png);
  145. }
  146.  
  147. /* You named this layer Panel  de  Usuario */
  148. #Layer-13 {
  149.   position: absolute;
  150.   left: 746px;
  151.   top: 50px;
  152.   width: 130px;
  153.   height: 11px;
  154.   z-index: 13;
  155.   background:url(panel-usuario-texto.png);
  156. }
  157.  
  158. /* You named this layer El  seridor  de  esta  web  no */
  159. #Layer-14 {
  160.     position: absolute;
  161.     left: 289px;
  162.     top: 16px;
  163.     width: 435px;
  164.     height: 15px;
  165.     z-index: 14;
  166.     background:url(pie-texto.png);
  167. }
  168.  
  169. /* You named this layer Los  Ultimos  Estrenos */
  170. #Layer-15 {
  171.   position: absolute;
  172.   left: 325px;
  173.   top: 12px;
  174.   width: 152px;
  175.   height: 11px;
  176.   z-index: 15;
  177.   background:url(estrenos.png);
  178. }
  179.  
  180. /* You named this layer Musica */
  181. #Layer-16 {
  182.   position: absolute;
  183.   left: 315px;
  184.   top: 13px;
  185.   width: 162px;
  186.   height: 12px;
  187.   z-index: 16;
  188.   background:url(musica-texto.png);
  189. }
  190.  
  191. /* You named this layer Software */
  192. #Layer-17 {
  193.   position: absolute;
  194.   left: 292px;
  195.   top: 13px;
  196.   width: 205px;
  197.   height: 16px;
  198.   z-index: 17;
  199.   background:url(programas-texto.png)
  200. }
  201.  
  202. /* You named this layer Juegos */
  203. #Layer-18 {
  204.   position: absolute;
  205.   left: 307px;
  206.   top: 13px;
  207.   width: 181px;
  208.   height: 16px;
  209.   z-index: 18;
  210.   background:url(juegos-texto.png);
  211. }
  212.  
  213. /* You named this layer Series */
  214. #Layer-19 {
  215.   position: absolute;
  216.   left: 261px;
  217.   top: 13px;
  218.   width: 266px;
  219.   height: 14px;
  220.   z-index: 19;
  221.   background:url(series-texto.png);
  222. }
  223.  
  224. /* You named this layer Peliculas */
  225. #Layer-20 {
  226.   position: absolute;
  227.   left: 299px;
  228.   top: 12px;
  229.   width: 193px;
  230.   height: 12px;
  231.   z-index: 20;
  232.   background:url(ultimas-peliculas.png);
  233. }
  234.  
  235. /* You named this layer Categorias */
  236. #Layer-21 {
  237.   position: absolute;
  238.   left: 42px;
  239.   top: 16px;
  240.   width: 76px;
  241.   height: 15px;
  242.   z-index: 21;
  243.   background:url(categorias-texto.png);
  244. }
  245.  
  246. /* You named this layer Publicidad */
  247. #Layer-22 {
  248.   position: absolute;
  249.   left: 44px;
  250.   top: 17px;
  251.   width: 73px;
  252.   height: 11px;
  253.   z-index: 22;
  254.   background:url(publidad-texto.png);
  255. }
  256.  
  257. /* You named this layer todoenlacesorg */
  258. #Layer-23 {
  259.   position: absolute;
  260.   left: 77px;
  261.   top: 66px;
  262.   width: 378px;
  263.   height: 48px;
  264.   z-index: 23;
  265.   background:url(texto-encabeazdo-1.png);
  266. }
  267.  
  268. /* You named this layer PELICULAS  -  SERIES  -  JUEGOS */
  269. #Layer-24 {
  270.   position: absolute;
  271.   left: 90px;
  272.   top: 103px;
  273.   width: 338px;
  274.   height: 10px;
  275.   z-index: 24;
  276.   background:url(texto-encabezado-2.png);
  277. }
  278.  
  279. #Layer-25 {
  280. background:url("publicidad-contenido.png") repeat scroll 0 0 transparent;
  281. height:90px;
  282. left:26px;
  283. padding:8px 14px 9px;
  284. position:absolute;
  285. text-align:center;
  286. top:491px;
  287. width:729px;
  288. z-index:13;
  289. }
  290.  
  291. #Layer-26 {
  292.     position: absolute;
  293.     left: +664px;
  294.     top: +44px;
  295.     width: 294px;
  296.     height: 118px;
  297.     z-index: 1;
  298.     background:url(panel-usuario.png);
  299.     text-align: center;
  300. }
  301.  
  302. #Layer-27 {
  303.     position: absolute;
  304.     left: +664px;
  305.     top: +44px;
  306.     width: 294px;
  307.     height: 118px;
  308.     z-index: 1;
  309.     background:url(panel-usuario-login.png);
  310.     text-align: center;
  311. }
  312.  
  313. /* Here are some examples of how you might want to change the
  314.  * look and behavior of the links on your page.  Some examples for
  315.  * further customization are included in comments.  */
  316. a {
  317.   cursor: pointer;
  318.   outline: none;
  319. }
  320. a:link { color: #F88; }
  321. a:visited { color: #F88; }
  322. a:hover {
  323.   color: #F00;
  324.   /* text-decoration: underline; */
  325.   /* font-weight: bold; */
  326. }
  327.  
  328. #Layer-12 #Layer-26 table tr th table tr th {
  329.     text-align: left;
  330. }


he usado esto pero solo se me centra en XXXX x XXXX resolucion, si pongo la resolucion mas pequeña se me descuadra...:

Código CSS:
Ver original
  1. .box1 {
  2.     position: absolute;
  3.     margin-left: auto;
  4.     margin-right: auto;
  5.     left:0;
  6.     right:90px;
  7.     width:80px;
  8.  
  9. }
  #2 (permalink)  
Antiguo 06/06/2010, 15:23
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

con un correcto <doctype! y un contenedor con un ancho establecido y margin:0 auto; te vale para centrar una capa.

con esto centraras horizontalmente este elemento segun su contenedor.
aun que no lo veo necesario sacarlo del flujo del documento tan solo para centrar. pero bueno en ocaciones es necesario dependiendo de lo que necesites (que tu subras supongo)
Código:
.box1 {
    position: absolute;
    margin-left: -40px;
    margin-right: auto;
    left:50%;
    right:90px;
    width:80px;
}
PD: Usa el buscador que se ah tratado una infinidad de veces para centrar un elemento o varios en cualquier direccion
  #3 (permalink)  
Antiguo 06/06/2010, 15:28
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: centrar div

gracias voy a provarlo, y sobre el buscador, llevo como 2h buscando, no me gusta postear sin antes buscar.
  #4 (permalink)  
Antiguo 06/06/2010, 15:38
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: centrar div

Bueno, ya lo he puesto, asi me ha quedado:



  #5 (permalink)  
Antiguo 06/06/2010, 15:59
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

si te fijas en el primer ejemplo que te puse...
el elemento que quieras centrar de su width le restas el 50% con margin-left entiendes? o sea
width:80px; (con left:50%;) = margin-left: -40px;
por que "margin:0 auto;" no te vale? por que ya tienes algunos post y esa screen ya me hiso recordar... que tienes todos tus elmentos fuera de flujo "position:absolute" lo que me parece incorrecto sino me equivoco son los "#Layer" del DW...

Cita:
y sobre el buscador, llevo como 2h buscando
Te aseguro que no eres el primero ni el ultimo que ah preguntado como centrar un elemento/contenedor...

Como consejo te digo que leas
http://www.forosdelweb.com/f53/aport...ml-css-648073/
http://www.forosdelweb.com/f53/aport...rte-ii-657814/
y
http://librosweb.es/
y que comienzes de nuevo a maquetar tu proyecto para que no tengas problemas y cualquier duda que tengas te ayudamos
  #6 (permalink)  
Antiguo 06/06/2010, 16:10
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: centrar div

Ok, gracias, empezare a maquetarla de nuevo, ya que como dices es por el position: absolute;

por que cuando lo borro, se me desordena todo...
  #7 (permalink)  
Antiguo 06/06/2010, 16:14
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

Cita:
Iniciado por Most Ver Mensaje
Ok, gracias, empezare a maquetarla de nuevo, ya que como dices es por el position: absolute;
por que cuando lo borro, se me desordena todo...
Sip la verda es la mejor opcion
  #8 (permalink)  
Antiguo 06/06/2010, 18:17
 
Fecha de Ingreso: julio-2009
Mensajes: 172
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: centrar div

hace un div contenedor
__________________
Mi Twitter
  #9 (permalink)  
Antiguo 06/06/2010, 18:44
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: centrar div

Cita:
Iniciado por GastonManatico Ver Mensaje
hace un div contenedor
ya lo he echo, pero si pongo 1 medidas, con la resolucion 1280×768 se ve bien, y si la cambio a 1024×768 se ve descentrada...
  #10 (permalink)  
Antiguo 06/06/2010, 19:44
 
Fecha de Ingreso: febrero-2009
Mensajes: 489
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: centrar div

deje yo te lo arreglo dame tiempo jejej :)
__________________
sitios
www.avisoya.com
www.yavendi.com
  #11 (permalink)  
Antiguo 06/06/2010, 20:05
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: centrar div

............

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 00:24.