par

Comment faire pour centrer un élément en HTML ? Par exemple comment faire pour centrer horizontalement un DIV dans un autre DIV ?

<div class="exterieur">  
     <div class="interieur">Élément à centrer horizontalement</div>
</div>

2 Réponses

+1 validé
par

Vous pouvez centrer horizontalement une balise DIV avec la propriété MARGIN, de cette manière :

.interieur {margin: 0 auto;} 

Pour une meilleure compatibilité avec Internet Explorer 8+, il est préférable d'ajouter la propriété DISPLAY, comme ceci :

.interieur {display: table ; margin: 0 auto;} 

Cela rend l'élément interne centré horizontalement et il fonctionne sans définir une width spécifique.

Voici le code complet basé sur votre exemple pour centrer horizontalement un DIV dans un autre DIV :

<style>
.interieur {display: table; margin: 0 auto;} 
</style>

<div class="exterieur" style="width:100%">
    <div class="interieur">Élément à centrer horizontalement</div>
</div>

Pour centrer horizontalement le contenu d'une balise DIV, vous devez utiliser TEXT-ALIGN de cette manière :

<style>
.centrer-texte {text-align: center;}
</style>

<div class="centrer-texte">Ce texte est centré</div>
+1 validé
par

Il existe toujours la balise <center> qui certes a été déprécié en HTML4 et XHTML1 mais qui est encore supportée par tous les navigateurs Web.

<center>HTML à centrer</center>

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...