Solucior
» CSS
» Centrer un élément dans la page
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.
Testé avec Safari Google Chrome Firefox3 Firefox4 Opera IE6 IE7
Centrer un élément dans la page
09/15/2011 par Dux - 4/5 (1 notes)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êtrecode 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é : 28x
Commentaires pour Centrer un élément dans la page
Aucun commentaire
• Zoom en CSS3
• Div qui suit le scrolling de la page
• Largeur image dynamique selon son emplacement
• Lien à confirmer
• Scroll div avec javascript
• Ajouter des lignes de champs à un formulaire dynamiquement
• Ajuster automatiquement la hauteur d'un textarea
• Cacher afficher un DIV avec scrolling
• Création de dossiers virtuels avec htaccess
• Déplacer un objet DOM vers le haut
• Div qui suit le scrolling de la page
• Largeur image dynamique selon son emplacement
• Lien à confirmer
• Scroll div avec javascript
• Ajouter des lignes de champs à un formulaire dynamiquement
• Ajuster automatiquement la hauteur d'un textarea
• Cacher afficher un DIV avec scrolling
• Création de dossiers virtuels avec htaccess
• Déplacer un objet DOM vers le haut