Alinear capa en centro de la pantalla

xBrYaNx · #1 (**permalink**) 31/01/2006, 10:16

Hola es posible alinear un capa en el centro de la pantalla?
las dimensiones de mi capa son w:400px y h:125px y kiero k se posicione al centro de la pantalla.

gracias

jesusbet · #2 (**permalink**) 31/01/2006, 12:49

margin: auto;

marquin · #3 (**permalink**) 03/11/2006, 08:55

Gracias, a mi me funcionó para fx el margin:auto pero no para ie... se mantiene incambiado. Como se puede hacer?

iconogt · #4 (**permalink**) 03/11/2006, 10:09

Aquí dejo te dejo un link que creo te servirá de mucho

http://www.forosdelweb.com/f53/quiero-pagina-centrada-437880/

marquin · #5 (**permalink**) 11/11/2006, 15:34

Gracias! Ahora, lo que hice fue por en body text-align:center y la capa "madre" contenedora de todo en posición relativa. Anduvo para IE, sin embargo, para Firefox con este seteo pierdon la visibilidad de la capa y su contenido. Cambio a posición absoluta y vuelvo a recuperar la visión en FX pero en IE vuelve a la izquierda...

Será que solo detectando el navegador y colocando diferentes .css para cada uno logre mismo comportamiento?

iconogt · #6 (**permalink**) 13/11/2006, 11:01

No sé que estarás haciendo mal amigo

yo así lo he venido haciendo siempre y me funca bien en EI y FX e incluso en Opera

... todo sin problemas... no veo xq hacer una hoja de estilos aparte para declarar eso, sería ilógico y además de por gusto

Pon tu código y veremos como solucionar eso va?

putokender · #7 (**permalink**) 14/11/2006, 06:00

no se porque me da que es esto lo que buscas... ;)

intensivstation.ch/files/templates/temp11.html

(eso con las www delante, que no me deja)

renderonesio · #8 (**permalink**) 15/11/2006, 07:01

Cita:

Iniciado por putokender

no se porque me da que es esto lo que buscas... ;)

intensivstation.ch/files/templates/temp11.html

(eso con las www delante, que no me deja)

Hola a todos
He logrado centrar mi página web en el navegador, gracias a la plantilla de intensivstation, que por cierto me parecen bastante interesantes. El problema surge cuando quieres anidar capas dentro de la web que has centrado, pues ninguna de las capas quedan en su sitio si no que se dsipersan hacia un lado o hacia otro según la resolución de la pantalla

. Hay alguna forma de solucionar esto.
Les agrradecería mucho la ayuda

putokender · #9 (**permalink**) 22/11/2006, 05:41

No tengo muy claro cual es tu problema. Creo qu te refieres a que aunque las capas esten dentro de esa "madre" centrada, no se posicionan en relacion a ella, ¿es asi? En tal caso (y siempre que otros de los gurus no me corrijan a collejas virtuales) creo que la movida va porq la capa "madre" esta posicionada relativamente, y las capas no la reconoces como origen.

Creo qeu el tema va por ahi. Espero no equivocarme y liarte aun mas

renderonesio · #10 (**permalink**) 22/11/2006, 06:27

Es todo lo contrario.o sea las capas (todas ellas con valor absoluto) anidadas o contenidas en la capa madre se encuentran bien situadas, mientras que es la capa madre la que se descentra según la resolución de pantalla. No obstante he probado a poner un valor relativo a la capa madre, y es entonces cuando esta keda centrada, pero las capas anidadas se descentran por completo. He probado a poner como valor relativo las capas anidadas, pero el efecto es mucho peor.

Solucion: Es dura pero es así. Lo que he hecho es colocar la capa madre en posicion left 0 y top 0. Solo así keda completamente centrada a una resolución de 800 x 600. A resoluciones de pantalla mas alta, siempre se verá situada en el margen izquierdo de la pantalla.
No es lo mas estético..... pero que le vamos a hacer si no hay otra solución

RBZ · #11 (**permalink**) 22/11/2006, 08:22

Cita:

Iniciado por renderonesio

Es todo lo contrario.o sea las capas (todas ellas con valor absoluto) anidadas o contenidas en la capa madre se encuentran bien situadas, mientras que es la capa madre la que se descentra según la resolución de pantalla. No obstante he probado a poner un valor relativo a la capa madre, y es entonces cuando esta keda centrada, pero las capas anidadas se descentran por completo. He probado a poner como valor relativo las capas anidadas, pero el efecto es mucho peor.

Solucion: Es dura pero es así. Lo que he hecho es colocar la capa madre en posicion left 0 y top 0. Solo así keda completamente centrada a una resolución de 800 x 600. A resoluciones de pantalla mas alta, siempre se verá situada en el margen izquierdo de la pantalla.
No es lo mas estético..... pero que le vamos a hacer si no hay otra solución

El problema es que las posiciones absolutas de las capas toman como referencia a la "pantalla", por lo tanto "ignoran" a la capa madre. Lo que tienes que hacer es situarlas con respecto a la capa contenedor (madre) mediante etiquetas como margin, padding...

Mira este enlace a ver si te ayuda a ver la diferencia. Para poder entender como maquetar páginas sin tablas

Al principio es un poco lioso hasta que captas la idea.

renderonesio · #12 (**permalink**) 22/11/2006, 11:03

Hola RBZ :

Muy interesante el tutorial que me has pasado, pero no me soluciona el problema, pues no menciona nada de posiciones absolutas o relativas para las capas.

Aqui el problema es poner una capa de posicion absoluta centrada independientemente de la resolución de pantalla.

He oido por ahí que existe un código para evitar que la resolución de pantalla descentre el contenido de la web, pero no tengo ni idea de donde poder encontrar dicho codigo y de que tipo de codigo se trata (html, java, php etc etc)
Alguien sabe algo?

putokender · #13 (**permalink**) 29/11/2006, 13:01

Si kieres "centrar" una capa absoluta, tienes uqe meterla dentro de otra relativa que este centrada. Asi es como lo hago yo y funciona...

Para centrarla horizontalmente basta con poner a la capa relativa:
margin:0px auto 0px auto;

Y eso si, para el tema vertical, es otro tema. Si quieres centrarla exactamente en el centro hay un hilo por aki donde lo explican muy bien (pero no se cual es, sorry), pero si kieres colocarla a una distancia concreta o algo asi... javascript.

renderonesio · #14 (**permalink**) 29/11/2006, 13:23

Acabo de probar lo que me comentas putokender y si es cierto que la web se keda bien centrada a resolución de pantalla 1024 x 768 pero prueba a hacerlo con resolución 1152 x 864 en pantalla y verás que se te descentra la misma.

No hay forma de conseguirlo. Por ahí he escuchado que hay un script que te permite mantener la posición centrada de la web independientemente de la resolucion de pantalla que tengas. La cosa es saber donde puede encontrar uno ese script

renderonesio · #15 (**permalink**) 09/12/2006, 17:39

Soledad digame?

Mikmoro · #16 (**permalink**) 09/12/2006, 18:19

Aupa.
No sé qué habrás encontrado en los tutoriales que te han recomendado, pero yo lo que uso es:

<style>
body {
margin: 0;
padding: 0;
}
#centro {
background-color: rgb(51, 153, 153);
position: absolute;
width: 400px;
height: 126px;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -63px;
}
</style>

Funciona de maravilla en todos los navegadores que conozco.

De todas maneras, es más sencillo y pones aquí tú código completo y lo podemos ver.

Mikel.

RBZ · #17 (**permalink**) 13/12/2006, 08:00

Cita:

Iniciado por renderonesio

Acabo de probar lo que me comentas putokender y si es cierto que la web se keda bien centrada a resolución de pantalla 1024 x 768 pero prueba a hacerlo con resolución 1152 x 864 en pantalla y verás que se te descentra la misma.

No hay forma de conseguirlo. Por ahí he escuchado que hay un script que te permite mantener la posición centrada de la web independientemente de la resolucion de pantalla que tengas. La cosa es saber donde puede encontrar uno ese script

Hola renderonesio:
El enlace que te puse era para que vieras como se comportan los elementos cuando los posicionas con valores relativos, pero para eso necesitas poner todos en valores relativos... No puedes anidar capas con valores absolutos a una con valor relativo para que se centren.

Si existe un script que haga lo que pides lo desconozco.