Centrer verticalement une page web

Publié par gryzzly, dernière mise à jour le jeudi 20 mars 2008 à 12:00:37 par gryzzly

Pour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript.

1. Le fichier .js
2. La page .html
3. Utilisation
4. Inconvénients
5. Rappel

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.

Précédent Librairies Javascript (Prototype/Scriptaculous/Yahoo UI, etc.)

Suivant Effets pour vos images

Résultats pour Centrer verticalement une page web

Centrer une page web (Résolu) Bonjour, J'ai centrer mes pages web mais il y un problème à l'affichage.Le contenu n'ait pas centrer, c'est seulement la bannière et le pied de page qui sont centrer. Merci pour votre aide. www.commentcamarche.net/forum/affich-2615063-centrer-une-page-web

Centrer ma page web (Résolu) Bonjour Voilà j'ai fait mon site mais j'ai un petit problème c'est que je n'arrive pas à centrer ma page !!! Comme vous pouvez le voir, tout est collé sur la droite... Comment faire pour que ça prenne toute la page???... www.commentcamarche.net/forum/affich-1836059-centrer-ma-page-web

Center une page web dans le navigateur (Résolu) Bonjour, Je suis en train de créer un site avec dreamweaver MX. Les dimensions de ma page sont : 640 x 480 px. Ma page contient une image jpeg ayant les même dimensions. Le soucis c'est que je n'arrive pas à centrer cette page dans mon... www.commentcamarche.net/forum/affich-3009025-center-une-page-web-dans-le-navigateur

Réponses suivantes

Résultats pour Centrer verticalement une page web

[Webmaster] Publier facilement une vidéo dans une page webPublier une vidéo dans une page web n'est pas toujours évident: Selon le format (AVI, MPG, MOV...) tout le monde ne possède pas forcément le bon plugin et le bon codec. En revanche, la quasi-totalité des navigateurs possèdent le plugin Flash (SWF).... www.commentcamarche.net/faq/sujet-3049-webmaster-publier-facilement-une-video-dans-une-page-web

[Webmaster] Les polices dans les pages webLes limites du web Quand vous utilisez une police dans une page web, elle ne s'affichera que si l'internaute a la même police installée sur son ordinateur. Vous n'avez aucun moyen de forcer l'internaute à télécharger et installer une police, pas... www.commentcamarche.net/faq/sujet-3951-webmaster-les-polices-dans-les-pages-web

[mythes] On peut protéger une page web/une image contre la copieMythe On peut empêcher la copie d'une page web ou d'une image. On peut empêcher de voir le source d'une page HTML. On peut empêcher la copie d'une vidéo, d'une musique. Réalité FAUX Explications Quelle que soit la nature d'un document (page... www.commentcamarche.net/faq/sujet-3134-mythes-on-peut-proteger-une-page-web-une-image-contre-la-copie

Réponses suivantes

Résultats pour Centrer verticalement une page web

[PHP] récupérer le code source d'une page web (Résolu)salut , je essayer de récupérer le code source d'une page web à partir de son URL. j'ai un code qui le fait avec Java mais j'ai besion en PHP ..... voila le code en java et si qlq peut me l'envoyer en PHP.......Merci --------------... www.commentcamarche.net/forum/affich-2266318-php-recuperer-le-code-source-d-une-page-web

IE7 ne peut pas afficher cette page web (Résolu)Bonsoir à tous - Depuis plusieurs jours IE7 ne peut plus m'afficher aucune page web. - Pourtant avec MSN Explorer et FF pas de problème, la Mule tourne et je reçois mes mails via Outlook Express. - IE7 me propose un diagnostic réseau dont voici... www.commentcamarche.net/forum/affich-3042536-ie7-ne-peut-pas-afficher-cette-page-web

Convertir une page web enfichier pdf (Résolu)bonsoir à toutes et tous (en premier lieu) Je cherche (et je ne trouve pas) s'il existe une extension ou un plugin ou je ne sais quoi (une manip dans acrobat pro 7.0) qui me permettrait de convertir directement une page web en fichier pdf : je... www.commentcamarche.net/forum/affich-2483644-convertir-une-page-web-enfichier-pdf

Réponses suivantes