Snippet : Centrage d'élément HTML

En partant de l'article de Jay Salvat : Les solutions pour centrer horizontalement et verticalement en CSS indiquant les différentes méthodes CSS pour centrer horizontalement et verticalement un élément HTML, j'ai eu envie de le reproduire en jQuery et ainsi de ne plus avoir la contrainte CSS de connaître à l'avance les dimensions de l'objet à positionner.
Avant toute chose, je vous conseille de (re)lire cet article : Les solutions pour centrer horizontalement et verticalement en CSS .

Pour déterminer, le centrage à appliquer j'ajoute un attribut "jq_align" aux élément HTML, cet attribut peut prendre les valeurs suivantes :

• h : centrage horizontal
• v : centrage vertical
• both : centrage horizontal et vertical

Le code javascript utilisant jQuery pour appliquer le centrage est le suivant :

  $("[jq_align]").each(function(i)
  {
    var align = $(this).attr('jq_align');
    if( ('h' == align ) || ('both' == align) ) $(this).css({'position':'relative','left':'50%','margin-left':($(this).width()/-2)+'px'});
    if( ('v' == align ) || ('both' == align) ) $(this).css({'position':'relative','top':'50%','margin-top':($(this).height()/-2)+'px'});
  });

En fonction de l'attribut "jq_align", j'applique les transformations CSS décrites par Jay Salvat sur son blog.

Et voici un petit exemple de rendu :



Le code HTML :

Box centrée horizontalement



Box centrée verticalement



Box centrée horizontalement et verticalement

Le Code CSS :

.container
{
  width:450px;
  height:250px;
  background-color:white;
  border:black 1px solid;
}
.box
{
  width:200px;
  height:100px;
  background-color:#3399CC;
  color:white;
}