Este tip no es precisamente una pieza de alta tecnología arcana ni un algoritmo intrincadísimo digno sólo de la más privilegiada mente rusa. Nada de eso. Pero nos resulta tremendamente útil y es ese tipo de utilidad la que también queremos aportar en este blog, por si algún desarrollador con mala memoria (y malos skills de CSS) como nosotros tiene que centrar una película flash en HTML y pierde un tiempo valioso buscando cada vez ese preciado fragmento de código que aquella vez había funcionado tan bien… Espero que no seamos los únicos que nos vemos frecuentemente en dicha situación 😉
Vamos a utilizar por supuesto Swfobject para embeber nuestra peli Flash, así que lo que queremos centrar en la ventana es el <div> que contiene la peli.
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
background-color:#ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#wrapper
{
border: 1px solid #CCCCCC;
position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; width:400px; height:300px;
}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("my_flash.swf", "flash_container", "400", "300", "10", "expressInstall.swf");
</script>
</head>
<body>
<div id="wrapper">
<div id="flash_container">
<p id="alternative_content"><h1>Flash Player 10 Required</h1>
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</div>
</body>
</html>
Gracias a Eli, experta en templating de nitsnets | studios por su inestimable ayuda y apoyo con todas las cosas CSS 😉