37 votes

Différence entre <span>et</span> <div> <span>avec text-align: center ;?</span>

Je ne comprends pas ceci:

J'ai essayé de centrer le texte-align d'une balise HTML <span> mais cela n'a rien fait ... Avec la balise <div> , tout a fonctionné. Même sittuation avec réglage margin: 0px auto; en css.

Pourquoi la balise span ne prend-elle pas en charge la fonction text-align; ?

117voto

Spudley Points 85371

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.

10voto

ooPeanutButter Points 333

Comme d'autres l'ont dit, le span est un élément en ligne.

Voir ici: http://www.w3.org/TR/CSS2/visuren.html

De plus, vous pouvez faire en sorte qu’un span se comporte comme une div en appliquant un

 style="display: block; margin: 0px auto; text-align: center;"
 

4voto

slolife Points 6528

Une balise span est seulement aussi large que son contenu, il n'y a donc pas de «centre» d'une balise span. Il n'y a pas d'espace supplémentaire de chaque côté du contenu.

Cependant, une balise div est aussi large que son élément conteneur, de sorte que le contenu de cette div peut être centré en utilisant tout espace supplémentaire que le contenu ne prend pas.

Donc, si votre div a une largeur de 100px et que votre contenu ne prend que 50px, le navigateur divisera les 50px restants par 2 et plaquera 25px de chaque côté de votre contenu pour le centrer.

4voto

Dennis Traub Points 24186

Les étendues sont en ligne, les div sont des éléments de bloc. c'est-à-dire que les plages sont aussi larges que leur contenu respectif. Vous pouvez aligner la plage à l'intérieur du conteneur environnant (s'il s'agit d'un conteneur de bloc), mais vous ne pouvez pas aligner le contenu.

Span est principalement utilisé à des fins de formatage. Si vous souhaitez organiser ou positionner le contenu, utilisez div, p ou un autre élément de bloc.

2voto

Dave G Points 4442

Span est considéré comme un élément en ligne. En tant que tel, il se limite fondamentalement au contenu qu’il contient. C'est plus ou moins transparent.

Pensez-y en ayant le comportement de la balise 'b'.

Il peut être exécuté comme suit: <span style = 'font-weight: bold;'> texte en gras </ span>

div est un élément de bloc.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X