la différence n'est pas entre <span>
et <div>
spécifiquement, mais entre - inline
et block
- éléments. <span>
valeurs par défaut pour être display:inline;
alors qu' <div>
valeurs par défaut pour être display:block;
. Mais ceux-ci peuvent être remplacées dans les CSS.
La différence dans la façon dont text-align:center
travaux entre les deux est la largeur.
Un block
élément par défaut étant la largeur de son conteneur. Il peut avoir sa largeur définie à l'aide de CSS, mais de toute façon il est de largeur fixe.
Un inline
élément prend sa largeur à partir de la taille de son contenu texte.
text-align:center
indique le texte à se positionner de manière centralisée dans l'élément. Mais dans un inline
élément, ce n'est clairement ne va pas avoir d'effet parce que l'élément est de la même largeur que le texte; l'alignement d'une manière ou l'autre est pas de sens.
En block
élément, parce que la largeur de l'élément est indépendant du contenu, le contenu peut être placée à l'intérieur de l'élément à l'aide de l' text-align
style.
Enfin, une solution pour vous:
Il y a une valeur supplémentaire pour l' display
de la propriété qui offre une à mi-chemin entre block
et inline
. Assez confortablement, il est appelé inline-block
. Si vous spécifiez un <span>
être display:inline-block;
dans le CSS, il continuera à fonctionner comme un élément inline, mais certaines des propriétés d'un bloc, comme la possibilité de spécifier un width
. Une fois que vous spécifiez une largeur pour cela, vous serez en mesure de centrer le texte à l'intérieur de cette largeur à l'aide de text-align:center;
Espérons que cela aide.