Centrer verticalement un élément HTML à l’aide de jQuery

Les CSS ne proposent pas de centrer verticalement un élément HTML dans un autre. Un peu de JavaScript est alors nécessaire.

Prenons le cas d’une image à centrer verticalement dans un élément div conteneur. Marquons dans un premier temps l’élément à centrer avec la classe CSS vertical-align-center :

<div style="width: 300px; height: 300px; background-color: #cbc;">
	<img alt="" src="myimage.jpg" class="vertical-align-center"/>
</div>

Un peu de JavaScript centrera l’image :

<script type="text/javascript">//<!--
$(document).ready(function() {
	verticalAlignCenter();
});

function verticalAlignCenter() {
	$(".vertical-align-center").each(function() {
		var $elem = $(this);
		var elemHeight = $elem.height();
		if (elemHeight == 0)	// perhap's an element is no loaded
			return;
		var $container = $elem.parent();
		var marginTop = Math.floor(($container.height() - elemHeight) / 2);
		if (marginTop > 0)
			$elem.css("margin-top", marginTop);
		$elem.removeClass("vertical-align-center");
	});
}
//--></script>

Cas particulier d’une image

En production, sur les navigateurs disposant d’une connexion à débit réduit, le script s’exécutera parfois avant le chargement de l’image. Dans ce cas, et si la hauteur de l’image n’est pas précisée par une propriété CSS, alors il n’est pas possible de centrer l’image au chargement de la page Web. Il faut alors relancer l’exécution de la fonction verticalAlignCenter() plus tard. Afin d’éviter de recalculer plusieurs fois les mêmes éléments, le script retire la propriété CSS des éléments centrés.

7 Responses to Centrer verticalement un élément HTML à l’aide de jQuery

  1. F L says:

    Merci pour ce code bien utile, je m’en sers et il fonctionne parfaitement.

    Je ne connais pas bien le javascript, aussi je me demandais quelle serait la syntaxe afin que le script soit appliqué à chaque redimensionnement de la fenêtre du navigateur par l’utilisateur ?

    On peut sinon obtenir un résultat visuel assez chaotique dans ce cas précis.

    Merci !

  2. Cpag says:

    Avec :

    window.onresize = function () {
    // ...
    };

    Notez également que la plupart des besoins de centrage sont couverts par CSS 2.1 (≥ IE8), par exemple avec display: table ou display: inline-block et la propriété vertical-align.

  3. F L says:

    Merci !!

    Oui en effet, très bon article ici à ce sujet :

    http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

    Mais dans certains cas on ne peut pas attribuer cette propriété à moins de voir sa mise en page modifiée.

  4. F L says:

    Une dernière question : est-il possible de faire en sorte que la marge supérieure soit recalculée dès que l’on continue à réduire ou agrandir la fenêtre du navigateur ?
    Dans le cas présent, un calcul est en effet effectué, mais il a lieu une seule fois, lorsqu’on “manipule” la fenêtre du navigateur au tout début, si bien que si l’on continue à réduire ou agrandir, les proportions de centrage vertical ne sont pas bonnes puisque le calcule n’est pas fait en temps réel.

    Merci encore pour vos lumières, je ne suis pas développeur !!

  5. Cpag says:

    Bonjour, essayez d’ajouter une gestion de l’évènement “window.onresize” :

    $(document).ready(function() {
    window.onresize = function () {
    verticalAlignCenter();
    }
    verticalAlignCenter();
    });

  6. Cpag says:

    Et supprimez aussi la ligne “$elem.removeClass(“vertical-align-center”);”.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « JMsg1r » dans le champ ci-dessous :