Centrer du contenu verticalement sur une page Vous voulez centrer verticalement un élément sur une page ? Le CSS et le HTML ne sont pas suffisants. Il va falloir une petite dose de JavaScript pour aider à la mise en page.
|
Introduction
- Parfois, on veut centrer verticalement un élément sur une page. On a un petit calque de 300 pixels, mignon, avec du texte et tout. Mais il est collé en haut du navigateur, et laisse un gros vide en dessous. Et comme les résolutions changent selon le visiteur, on ne peut pas définir des marges fixes. Et en CSS, aucune possibilité pour un placement relatif.
Bref, il faut faire appel à du JavaScript pour positionner cet élément dynamiquement.
Edit par 'Christa : Une version plus "simple" à la fin :3
1 - La fonction
- Entre les balises <head></head> de votre page, vous allez coller ce petit script. Il permet de centrer un élément (un seul, puisqu'il le sélectionne par son id) sur votre page. Il dispose d'une fonction de "veille" qui rappelle la fonction de centrage en cas de redimensionnement de votre fenêtre.
Pas besoin d'éditer le code ci-dessous, c'est du "prêt-à-l'emploi" ^^
Code ▼ Sélectionner le code
<script type="text/javascript">
//<!--
function align() {
var trucacenter = document.getElementById('centrage');
var container = document.documentElement;
if(trucacenter && container) {
var containerHeight;
if (container.innerWidth) {
containerHeight = container.innerHeight;
} else {
containerHeight = container.clientHeight;
}
var trucacenterHeight;
if (trucacenter.innerWidth) {
trucacenterHeight = trucacenter.innerHeight;
} else {
trucacenterHeight = trucacenter.offsetHeight;
}
var y = Math.ceil((containerHeight - trucacenterHeight) / 2);
if(y < 0) {
y = 0;
}
trucacenter.style.position = "relative";
trucacenter.style.top = y + "px";
}
if (document.getElementById) {
document.body.style.visibility = 'visible';
}
}
function addevent(obj, evt, fonction, capt) {
if(obj.addEventListener) {
obj.addEventListener(evt, fonction, capt);
return true;
} else if(obj.attachEvent) {
obj.attachEvent('on'+evt, fonction);
return true;
} else {
return false;
}
}
if (document.getElementById && document.getElementsByTagName) {
addevent(window, 'load', align, false);
addevent(window, 'resize', align, false);
}
//-->
</script>2 - Le conteneur
- Ensuite, dans votre page, il suffit d'encapsuler votre contenu dans un calque dont l'identifiant est "centrage".
Code ▼ Sélectionner le code
<div id="centrage">Bla bla contenu</div>Et voila, c'est bon. Si vous rencontrez des problèmes avec ce tutoriel, n’hésitez pas a poser vos questions à la suite ^^
Autre méthode, avec JQuery
- Si vous avez déjà le JQuery importé sur votre page (ce qui est le cas par défaut sur forumactif), utilisez simplement ce code :
Code ▼ Sélectionner le code
<script type="text/javascript">
//<!--
jQuery.fn.center = function() {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this;
};
//-->
</script>
