Différence entre <span> et <div> avec text-align: center ;?
Je ne comprends pas ça:
J'ai essayé de centrer l'alignement du texte d'un HTML <span> tag mais ça n'a rien fait ... Avec le <div> tag, tout a fonctionné. Même sittuation avec réglage margin: 0px auto; en css.
Pourquoi la balise span ne prend-elle pas en charge le text-align; une fonction?
la différence n'est pas entre <span> et <div> spécifiquement, mais entre inline et block éléments. <span> par défaut à être display:inline; tandis que <div> par défaut à être display:block;. Mais ceux-ci peuvent être remplacés en CSS.
La différence dans la façon dont text-align:center fonctionne entre les deux est à la largeur.
Par défaut, un élément block est la largeur de son conteneur. Sa largeur peut être définie à l'aide de CSS, mais dans les deux cas, il s'agit d'une largeur fixe.
Un élément inline tire sa largeur de la taille de son texte de contenu.
text-align:center indique au texte de se positionner au centre de l'élément. Mais dans un élément inline, cela n'aura clairement aucun effet car l'élément est de la même largeur que le texte; l'aligner dans un sens ou dans l'autre n'a pas de sens.
Dans un élément block, étant donné que la largeur de l'élément est indépendante du contenu, le contenu peut être positionné dans l'élément à l'aide de text-align style.
Enfin, une solution pour vous:
Il existe une valeur supplémentaire pour la propriété display qui fournit une maison à mi-chemin entre block et inline. Assez commodément, cela s'appelle inline-block. Si vous spécifiez un <span> être display:inline-block; dans le CSS, il continuera à fonctionner en tant qu'élément en ligne mais prendra également certaines des propriétés d'un bloc, comme la possibilité de spécifier un width. Une fois que vous lui aurez spécifié une largeur, vous pourrez centrer le texte dans cette largeur en utilisant text-align:center;
J'espère que ça t'as aidé.
Comme d'autres l'ont dit, 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 un div en appliquant un
style="display: block; margin: 0px auto; text-align: center;"
Les portées sont en ligne, les divs sont des éléments de bloc. c'est-à-dire que les portées ne sont aussi larges que leur contenu respectif. Vous pouvez aligner la portée à l'intérieur du conteneur environnant (s'il s'agit d'un conteneur de blocs), mais vous ne pouvez pas aligner le contenu.
L'étendue est principalement utilisée à des fins de formatage. Si vous souhaitez organiser ou positionner le contenu, utilisez div, p ou un autre élément de bloc.
Une balise span est uniquement 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.
Une balise div, cependant, 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 n'occupe pas.
Donc, si votre div a une largeur de 100 pixels et que votre contenu ne prend que 50 pixels, le navigateur divisera les 50 pixels restants par 2 et remplira 25 pixels de chaque côté de votre contenu pour le centrer.
L'envergure est considérée comme un élément en ligne. En tant que tel, il se limite essentiellement au contenu qu'il contient. Il est plus ou moins transparent.
Imaginez qu'il ait le comportement de la balise "b".
Il peut être exécuté comme <span style = 'font-weight: bold;'> texte en gras </span>
div est un élément de bloc.
Il se peut que ce soit parce que vos ensembles d'éléments span sont aussi larges que leur contenu. si vous avez un div avec une largeur de 500 pixels et un centre d'alignement du texte, et que vous entrez une balise span, elle doit être alignée au centre. Votre problème pourrait donc être un problème CSS. Installez Firebug sur Firefox et vérifiez les attributs de style de votre objet span ou div.