Positionner le centre d'un élément

Comment gérer la création de l'écran d'une application web lorsque ces différents composants doivent être positionner par rapport à leur centre.

Présentation

Le positionnement d'un élément HTML lorsqu'il est sorti du flux se fait par défaut à partir du point en haut (top) à gauche (left) de la boîte dessinée par le dit élément ; On peut éventuellement décider de le positionner à partir de son bord bas (bottom) et/ou droit (right). D'autres systèmes d'interfaces graphiques demandent ou utilisent un mode de positionnement différent, comme la notion de « layout » par exemple.

J'ai eu à porter dans des applications web un de ces systèmes « altérnatifs »(1), qui permet de positionner un élément de manière proportionnelle avec son centre comme point d'ancrage.

Image

Changement d'ancrage du positionnement d'un élément HTML.

Code

Le code ci-dessous est une version simplifiée de la solution mise en place, qui doit par ailleurs gérer l'élasticité des éléments.

/**
 *  Méthodes pour positionner le centre d'un élément HTML
 */
var posCenter = {
    /**
     *  Positionner le centre d'un élément sur l'axe horizontal.
     *
     *  @param {HTMLElement} element à positionner.
     *  @param {int} pos La position en pourcent par rapport au bord gauche du parent.
     */
     x: function (element, pos) {
        element.style.left = pos + '%';
        element.style.marginLeft = '-' + (element.offsetWidth/2) + 'px';
    },
    /**
     *  Positionner le centre d'un élément sur l'axe vertical.
     *
     *  @param {HTMLElement} element à postionner.
     *  @param {int} pos La position en pourcent par rapport au bord haut du parent.
     */
    y: function (element, pos) {
        element.style.top = pos + '%';
        element.style.marginTop = '-' + (element.offsetHeight/2) + 'px';
    }
};
Positonner un élément en ancrant son centre.

Démonstration

Ressources et références

Titre
Position absolue et centrages d'un élement HTML
Auteur
Rui NIBAU
Editeur
Omacronides
Date
Titre
Position absolue et taille des éléments HTML
Auteur
Rui NIBAU
Editeur
Omacronides
Date
Titre
CSS 2.1 Specification
Auteurs
Bert BOS
Auteurs
Tantek ÇELIK
Auteurs
Ian HICKSON
Auteurs
Lie WIUM
Editeur
W3C
Date
Chapitre
9.3 Positioning schemes
Titre
CSS Positioned Layout Module Level 3
Auteurs
Arron EICHOLZ
Editeur
W3C
Date