Centrage horizontal et vertical d'un calque, suite

Le principe du centrage consiste, tout d'abord, à indiquer au navigateur le point ... central de la fenêtre affichée (et non de la page !). Le moyen le plus évident est d'utiliser des valeurs de pourcentage, en l'occurence 50%, tant par rapport au bord supérieur (top) qu'au bord gauche (left). Il est intéressant de savoir que ces valeurs sont réglées alors automatiquement par le navigateur en fonction de la présence ou de l'absence d'un ascenseur. Il reste maintenant à spécifier l'emplacement précis des bords supérieur et gauche du calque (ou boîte) désiré. Quoi de plus naturel, dès lors, que de continuer en partant du centre ... et de revenir, en quelque sorte, en arrière en utilisant des valeurs négatives. Attention toutefois : il n'est plus possible, à partir d'ici, de dimensionner les calques au moyen de valeurs relatives : il faudra utiliser des unités de mesure. Ce sont donc les margin-top et margin-left qui les préciseront. Ces deux propriétés seront réglées avec une valeur correspondant à la moitié exacte des dimensions de la boîte. Dans l'exemple de la page précédente, ces propriétés/valeurs sont respectivement

height : 220px ; margin-top : -110px   et   width : 400px ; margin-left : -200px

Cette impression d''illogisme est donc respectée jusqu'au bout ; en effet, dans l'élaboration des calques, le principe basique est d'en régler les paramètres en fonction des volumes extérieurs. Les propriétés margin, border et padding en sont les principales représentantes. Les concepteurs de la deuxième mouture des CSS auraientt été bien inspirés en permettant une propriété/valeur aussi lumineuse que block-align : center, à l'instar de ce qui a été implémenté pour le centrage des textes ... Il existe, par ailleurs, une propriété/valeur à laquelle Mozilla est particulièrement sensible : margin : auto ... mais où IE fait encore preuve de mauvaise volonté. Elle est pourtant bien pratique et "fonctionne" aussi bien dans le centrage de calques que d'images.

Evidemment, les autres propriétés de positionnement doivent être toutes mises à 0 (zéro) en utilisant des valeurs relatives ... ou en omettant tout simplement d'en préciser la nature. Vous en voyez le résultat sur cette page : un carré de 20 pixels de côté et de couleur verte est affiché au centre de la fenêtre si vous êtes sous Mozilla. Sous IE qui se plante lamentablement, ce même carré est affiché en début du premier paragraphe de cette page, à l'endroit où il est écrit en code source. Si vous faites l'expérience de l'écrire à un autre endroit, vous constaterez qu'il apparaît également à cet endroit (avec IE !), suivant ainsi le flux naturel de l'écriture du code. Même si cela paraît naturel ... ce n'est pas orthodoxe ..., du moins dans l'esprit qui a présidé à l'élaboration de cette propriété/valeur.

Attendons CSS3 : cette impression d'illogisme, fondée ou non, sera alors peut-être dissipée.

Il est important de se souvenir d'un problème majeur dans l'habillage (si l'on peut s'exprimer ainsi) des calques : l'interprétation différente des propriétés de bordure et d'espace. Si vous désirez utiliser padding et border, il faut vous attendre à voir afficher des calques de dimensions différentes mais aussi un centrage qui ne le sera plus tout-à-fait ! Faites donc des essais d'affichage avec vos 2 navigateurs de test avant de mettre en ligne !

Mais ... avant de vous lancer tête baissée vers cette solution aux centrages "parfaits", ayez la curiosité d'afficher la première page de cet exposé dans des fenêtres de dimensions différentes. Force est de constater que le calque central ... est toujours bien centré, heureusement, mais que l'ensemble de la page ne tient peut-être plus la route ... Cette astuce doit donc être utilisée à bon escient, en tenant compte de tous les paramètres d'affichage de votre page ainsi que des ses différentes composantes.

Enfin, il est intéressant de noter que la valeur absolue utilisée pour le centrage des calques (et des images, comme dans l'encadré vert affiché dans cette page qui, si vous activez l'ascenceur, reste stoïquement planté au centre de la fenêtre) peut être remplacée par une valeur fixe, en utilisant la propriété/valeur position : fixed. Mais, une fois de plus, l'interprétation différente des navigateurs et surtout l'ineptie d'Internet Exploseur fait littéralerment ... exploser l'agencement de la page précédente si on tente de l'utiliser ! Le bel effet de "fixation" fonctionne parfaitement sous Mozilla et ses navigateurs apparentés mais se traduit par un affichage incohérent avec le butineur de Micro$oft.

Attention : les règles de style reproduites dans la page précédente, comportent un visibility : hidden. Ne reproduisez pas cette règle dans vos essais si vous n'utilisez pas le JavaScript destiné à activer les évènements voulus. Si vous l'utilisez dans votre feuille de style sans prévoir le script ... vous ne verrez rien car ...

le fameux calque centré le sera bien ... mais sera invisible ...