Comentarios sin revisar de la FAQ: Alinear el contenido horizontal y verticalmente

4 comentarios sin revisar
07/4/07

Por: erik
hola me funciono el codigo ya que era una tabla tambien.. y tenia divs ese era el problema.. gracias ^^
06/9/07

Por: Mon
Saludos a todos,

La solución comentada dos comentarios atrás no es válida en todos los casos: falla si la capa es de dimensiones mayores a las del navegador (parte superior e izquierda de la capa queda oculta e inaccesible).

Pueden verlo en el ejemplo del comentario citado (http://www.programacionweb.net/ejemplos/53.htm) reduciendo el tamaño de la ventana del navegador.

Quizás se piense que ese caso es extremo, pero imaginen un flash creado para una resolución de 1024 y visto en un monitor de 800x600.

En somosespartanos.com mostramos una solución efectiva que pasa por aplicar (mediante javascript) el famoso top:50% y margin-top negativo SOLO cuando sea necesario (ventana del navegador mayor al tamaño de la capa).

Podeis ver el código y descargarlo en

http://www.somosespartanos.com/2007/07/24/centrar-capa-div-horizontal-y-verticalmente-por-javascript/

Un saludo desde Esparta ;)
25/3/08

Por: Flanagan
Aqui esta este codigo que es muy interesante y funcona:

<html>

<head>

<title>Centrar SWF con CSS</title>

<style type="text/css">

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

.centrado {

position: absolute; /*Posicionamiento absoluto*/

top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/

left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/

height: 400px; /*Le ponemos el valor del alto*/

width: 500px; /*Le ponemos el valor del ancho*/

margin-top: -200px; /*Restamos la mitad de alto para centrarlo verticalmente*/

margin-left: -250px; /*Restamos la mitad de ancho para centrarlo horizontalmente*/

background-color: #00FF00; /*Este es el kolor de fondo, para ke el ejemplo sea visible*/

}

-->

</style>

</head>



<body>

<div class="centrado">

Hola, esta es la kapa kontenedor ke kedara centrada.

</div>

</body>

</html>
04/4/09

Por: Pablo
"Ariel" tiene razón:

El alineamiento vertical (valign para una tabla) no funciona si lo haces con la etiqueta <!DOCTYPE BLA BLA...> al inicio del documento ya que no se tiene en cuenta.
Si eliminamos <!DOCTYPE...> es simple, solamente con una tabla y y poniendo valign="middle" funciona.

Alojados en el grupo