SEDICE


Ayuda a Sedice
Necesitamos tu ayuda para mantener Sedice funcionando.
Aceptamos donativos con Paypal:

Para más información clica aquí


Conectado
Registro:

Apodo:
Contraseña:
Código de Seguridad: Codigo de Seguridad
Pon el código de seguridad:


Eres un usuario anónimo. Puedes registrarte aquí


290 conectados
289 anónimos
1 miembros

[más info sobre el foro]


Rincón del Autor
Conversa con el propio autor


NORMAS
NORMAS de comportamiento


Comentarios en leelibros
·Alexis en la ciudad sitiada
·El interviniente Petroni
·Conjurar el miedo con la palabra
·Los caminos perdidos
·El bar de los amantes pésimos

Leer más...


Google Chrome
Si usas Google Chrome, prueba el tema de Sedice


PORTADA
·blog_ Noticias CF: Fotos del GolemFest celebrado en Valencia
·blog_ Noticias CF: Portada y contenidos de la antología de cf "Efeméride"
·blog_ Noticias CF: Subasta de trajes y objetos de series de cf
·blog_Mar de tinta: Señoras que se empotraron hace mucho
·blog_ Noticias CF: Los replicantes de 'Blade Runner' protagonizan el día 29 la Noche Negra de Avilés

Leer más...

Sedice.com :: Ver tema - HTML/CSS: Cómo centrar verticalmente una capa div.
 FAQFAQ   BuscarBuscar   Grupos de UsuariosGrupos de Usuarios   PerfilPerfil   Entre para ver sus mensajes privadosEntre para ver sus mensajes privados   LoginLogin 

HTML/CSS: Cómo centrar verticalmente una capa div.

 
Publicar nuevo tema   Responder al tema    Foros de discusión -> HTML / CSS
Ver tema anterior :: Ver tema siguiente  
Autor Mensaje
Deavid
Administrador
Administrador



Registrado: Feb 05, 2005
Mensajes: 6677
Ubicación: Ontinyent (Valencia)
MensajePublicado: Mar Mar 29, 2005 3:45 pm    Asunto: HTML/CSS: Cómo centrar verticalmente una capa div. Responder citando

Después de buscar todo el día a ver cómo se puede centrar verticalmente, y conseguirlo, pues me parece intresante publicarlo por aquí, para que el resto de mis semejantes no tengan que volverlo a buscar Razz

La verdad es que es increible cómo algo tan simple se vuelve complicado....

Buscando encuentro, la forma oficial de centrar CSS, pero como me quedo Shocked cuando veo que no va en el IExplorer:
.centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
background-color: #FFFFFF;
color: white;
}


<body>
<div class="centered"> Objetos a centrar </div>
</body>

Funciona en el Opera, en el Firefox, en el Mozilla, Netscape, Konqueror....
Todos menos el Explorer. Maldito sea Microsoft Evil or Very Mad

Despues de buscar no se cuantas horas, encuentro un parche para que funcione también con el IExplorer..


.centered2 {
margin-top: -320px;
margin-left: -320px;
position: absolute;
top: 50%;
left: 50%;
width: 640px;
height: 640px;
}

Es a fin de cuentas, un parche. Funciona, por supuesto, pero no deja de ser parche.

Consiste en establecer el origen de la capa a la mitad del documento (50%, 50%) y luego establecer un punto de origen negativo (-320px, -320px).

El problema que tiene este parche es que tenemos que saber que tamaño queremos para la Div.
Hay que cambiar los margenes dependiendo del tamaño de la Div:
margin-top = -Div.tamañoY/2
margin-left = -Div.tamañoX/2
En mi caso la div mide 640x640. Pero puede servir para cualquier otro tamaño cambiando los margenes.

Para finalizar habría que cambiar las propiedades Width y Height para que se adapten al tamaño de la capa. Aunque si no me equivoco esto es lo menos importante, porque si sobra no se ve, y si falta tamaño la Div se expande. Aunque ya puestos no está de más ponerlo.

si alguien conoce otro método mejor, o simplemente un metodo diferente, por favor, ponedlo por aquí.

Seguro que más de uno ha pasado horas intentando centrar verticalmente y no ha podido..... yo uno de ellos.

Por cierto, me da bastantes problemas al postear código HTML.
Hablare con el resto de administradores a ver que pasa.

Para el que no lo sepa, la etiqueta ".centered2" tiene que ir dentro de una etiqueta style, con type="text/css". Lo había puesto todo, pero se me vuelve loco esto cuando le doy a enviar. Razz

Volver arriba
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Deavid
Administrador
Administrador



Registrado: Feb 05, 2005
Mensajes: 6677
Ubicación: Ontinyent (Valencia)
MensajePublicado: Mar Mar 29, 2005 3:50 pm    Asunto: Responder citando

Probando a postearlo todo junto ......

<stile type="text/css">
.centered2 {
margin-top: -320px;
margin-left: -320px;
position: absolute;
top: 50%;
left: 50%;
width: 640px;
height: 640px;
}
</stile>
...... Curioso......
no me respeta las tabulaciones que puse,
no me deja postearlo si pongo la palabra "style", en su lugar puse "stile"

bueno, ya lo averiguaré porqué....

Volver arriba
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Meteco
Leyenda
Leyenda



Registrado: Feb 09, 2005
Mensajes: 12951
Ubicación: En la entreplanta
MensajePublicado: Mar Mar 29, 2005 6:30 pm    Asunto: Responder citando

El método que yo usaría es:

Código:

   div#centrando {
position: absolute; top:5%; left: 10%; width: 80%; height: 90%; overflow: auto;
margin: 0% 0% 0% 0%;
padding: 0% 0% 0% 0%;
}


Funciona en IE. He dejado un margen asimétrico para que se vea mejor el ejemplo, y sin tocar el margin o el padding (así podremos hacer uso de ellos si nos interesa).

Si ha de cubrir todo el espacio (top, left son 0) entonces width y height serán 100

Nota. Editado el tamaño del width y height, que estaban al revés. Esta solución debería funcionar en todos los navegadores.


_________________
Lee y serás leído.

Jons dijo:

"Rajoy és com jo..."


Ultima edición por Meteco el Mie Mar 30, 2005 8:18 am, editado 1 vez
Volver arriba
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
Deavid
Administrador
Administrador



Registrado: Feb 05, 2005
Mensajes: 6677
Ubicación: Ontinyent (Valencia)
MensajePublicado: Mie Mar 30, 2005 1:28 am    Asunto: Responder citando

Lo probaré tambien a ver.

Pero una cosa, ¿me lo parece o el tamaño del contenido cambia con la ventana?

Tengo que probarlo a ver si da algún problema con el contanido.

Ya me parecía a mí raro que todo lo que hubiera para centrar capas Div en IE fuese un parche.
(Ahora falta que vaya con los otros exploradores)


_________________
Sedice necesita donativos para que los servidores sigan funcionando. Échanos un cable.
DeavidSedice's Blog
Volver arriba
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Meteco
Leyenda
Leyenda



Registrado: Feb 09, 2005
Mensajes: 12951
Ubicación: En la entreplanta
MensajePublicado: Mie Mar 30, 2005 8:17 pm    Asunto: Responder citando

Deavid escribió:

Pero una cosa, ¿me lo parece o el tamaño del contenido cambia con la ventana?
....
(Ahora falta que vaya con los otros exploradores)


Funciona en Netscape 7 y Firefox, además de IE.

Respecto a lo primero no entiendo.


_________________
Lee y serás leído.

Jons dijo:

"Rajoy és com jo..."
Volver arriba
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
vitovi
Peregrino
Peregrino



Registrado: Apr 09, 2008
Mensajes: 1
MensajePublicado: Mie Abr 09, 2008 2:58 pm    Asunto: centrar dos elementos dentro de un div Responder citando

Hola estoy liado con el centrado vertical de dos elementos, una imagen y un texto, no consigo centrarlo verticalmente

Lo que quiero hacer es una cabecera para un parrafo y tengo una imagen y un texto a su derecha

El texto siempre sale alineado por la parte inferior de la imagen, y a mi lo que me interesaria es poder centrar el texto a la mitad de la imagen.

Un saludo

Volver arriba
Ver perfil de usuario Enviar mensaje privado
Meteco
Leyenda
Leyenda



Registrado: Feb 09, 2005
Mensajes: 12951
Ubicación: En la entreplanta
MensajePublicado: Mie Abr 09, 2008 6:18 pm    Asunto: Responder citando

Podrías meterlos en una tabla y la fila VALIGN="MIDDLE"

_________________
Lee y serás leído.

Jons dijo:

"Rajoy és com jo..."
Volver arriba
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
Mostrar mensajes de anteriores:   
Publicar nuevo tema   Responder al tema    Foros de discusión -> HTML / CSS Todas las horas son GMT + 1 Hora
Página 1 de 1

 
Cambiar a:  
Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro


Forums ©





Web site powered by PHP-Nuke

Web site engine's code is Copyright © 2003 by PHP-Nuke. All Rights Reserved. PHP-Nuke is Free Software released under the GNU/GPL license.
server load avg:0.26 / php time:49 ms