Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » CSS » Centrer un élément dans la page

Centrer un élément dans la page

09/15/2011 par Dux   -   4/5 (1 notes)

Voici deux méthodes CSS pour aligner des blocs DIV par rapport au centre de la page ou de l'élément parent.
La première méthode utilise un positionnement absolu ne prennant pas en compte la position des autres éléments de la page. Elle est conseillée pour une mise en place rapide d'un template graphique bien ajusté.
La deuxième méthode utilise un div pour caler le deuxième DIV en hauteur. Le centrage horizontal est spécifié par des marges gauche et droite automatiques. Attention à ne pas oublier le DTD pour que cela fonctionne sous IE.

Voir une démonstration de ce script en action :

Ouvrir dans une nouvelle fenêtre     Ouvrir dans la même fenêtre

code source



 
<style type="text/css">
html, body {
       
margin: 0;
       
padding: 0;
       
width: 100%;
       
height: 100%;
}

/* Method 1 : absolute position */
.centered {
       
position: absolute;
       
top: 50%;
       
left: 50%;
       
height: 250px;
       
width: 400px;
       
margin: -125px 0 0 -200px;
       
background: red;
}

/* Method 2 : with another DIV */
.top_page {
       
height: 50%;
       
margin-bottom: -150px;
}
.
centered2 {
       
height: 300px;
       
width: 500px;
       
background: limegreen;
       
margin: 0 auto;
}

</
style>

<
div class="top_page">Your texte page here</div>
<
div class="centered2">Method 2</div>


<
div class="centered">Method 1</div>


Testé avec Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  
Noter ce code     |     Copié : 29x

Commentaires pour Centrer un élément dans la page

Aucun commentaire
Ajouter un commentaire Pseudo
ZOOM