Pour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript.
Merci à Dalida pour la source du fichier .js.
1. Le fichier .js
Copiez/collez ce script dans un fichier que vous nommerez par exemple : centrer.js
function align()
{
var lmt = document.getElementById('centrage');
var container = document.documentElement;
if(lmt && container)
{
var containerHeight;
if (container.innerWidth)
{
containerHeight = container.innerHeight;
}
else
{
containerHeight = container.clientHeight;
}
var lmtHeight;
if (lmt.innerWidth)
{
lmtHeight = lmt.innerHeight;
}
else
{
lmtHeight = lmt.offsetHeight;
}
var y = Math.ceil((containerHeight - lmtHeight) / 2);
if(y < 0)
{
y = 0;
}
lmt.style.position = "relative";
lmt.style.top = y + "px";
}
if (document.getElementById)
{
document.body.style.visibility = 'visible';
}
}
function addevent(obj,evt,fn,capt){
if(obj.addEventListener)
{
obj.addEventListener(evt, fn, capt);
return true;
}
else if(obj.attachEvent)
{
obj.attachEvent('on'+evt, fn);
return true;
}
else return false;
}
if (document.getElementById && document.getElementsByTagName)
{
addevent(window, 'load', align, false);
addevent(window, 'resize', align, false);
}
2. La page .html
Pour que votre page soit centrée, il faut appeler le fichier .js.
La page se présentera ainsi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<!-- [...] -->
<script type="text/javascript" src="centrer.js"></script>
</head>
<body>
<div id="centrage">
<!-- Mettez le code de votre page ici. Celui ci sera centré -->
</div>
</body>
</html>
3. Utilisation
La fonction javascript
align() définie dans le .js va récupérer le contenu qui doit être centré. Dans cet exemple, c'est l'élément portant l'identifiant [id="centrage"] qui sera centré.
var lmt = document.getElementById('centrage');Ainsi, dans l'exemple de page .html, c'est le contenu situé dans l'élément <div id="centrage"></div> qui sera centré.
4. Inconvénients
Bien évidemment, il s'agit d'un "bidouillage". Celui ci ne sera efficace qu'à la condition que l'utilisateur ait javascript activé dans son navigateur.
5. Rappel
Comme pour toute utilisation de javascript, il ne s'agit que d'un embellissement. Des solutions alternatives devraient toujours être proposées (malheureusement, certains semblent l'oublier !) au cas où l'internaute n'active pas le support de ce langage.
Dans le cas présent, ce n'est pas possible. Mais son utilisation n'empêche en rien la navigation si le support est désactivé. Encore une fois, ce n'est qu'un embellissement.
Aspirateur page web
