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>
0 votes
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 navigateur Web.

<center>HTML à centrer</center>
par

Il y a sur ce tuto un résumé de tout ce qui a été dit ici : inline,block, centrage, flex-box

La balise <center> est fortement déconseillée : les navigateurs peuvent cesser de la traiter d'un jour à l'autre.

Tendances

Questions liées

1 réponse
1 réponse
1 réponse
posée par anonyme 13-Juillet-2019
1 réponse

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

...