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.
