HTML span align center ne fonctionne pas?

J'ai du HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Le Div change l'espacement sur mon document, donc je veux utiliser un span pour cela à la place.

Mais span ne centralise pas le contenu:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

Comment puis-je résoudre ce problème?

Modifier:

Mon code complet:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>
78
demandé sur David19801 2011-12-06 01:35:53

7 réponses

Un div est un élément de bloc, et couvrira la largeur du conteneur à moins qu'une largeur ne soit définie. Un span est un élément en ligne, et aura la largeur du texte à l'intérieur. Actuellement, vous essayez de définir align en tant que propriété CSS. Align est un attribut.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

Cependant, l'attribut align est obsolète. Vous devez utiliser la propriété CSS text-align sur le conteneur.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
152
répondu Will 2013-06-17 18:10:36

Veuillez utiliser le style suivant. margin:auto normalement utilisé pour centrer aligner le contenu. display:table est nécessaire pour span élément de

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
36
répondu Chris J 2013-08-19 17:26:35

L'attribut align est obsolète. Utilisez CSS text-align à la place. En outre, le span ne centrera pas le texte sauf si vous utilisez display:block ou display:inline-block et définissez une valeur pour la largeur, mais il se comportera comme un div (élément de bloc).

Pouvez-vous poster un exemple de votre mise en page? Utilisation www.jsfiddle.net

23
répondu Lucifer Sam 2011-12-05 21:41:23
    span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

Pour moi, cela a très bien fonctionné. essayez aussi

7
répondu user1183033 2018-07-28 17:52:06

Span est un bloc en ligne et s'ajuste à la taille du texte en ligne, avec une ténacité qui bloque la plupart des efforts de style hors du contexte en ligne. Pour simplifier le style de mise en page (limiter les conflits), ajoutez div à la balise 'p' avec saut de ligne.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
0
répondu mark stewart 2015-05-13 07:44:36

En plus de toutes les autres explications, je crois que vous utilisez le signe "=" égal, au lieu de deux-points ":":

<span style="border:1px solid red;text-align=center">

Il devrait être:

<span style="border:1px solid red;text-align:center">
-1
répondu nhazean 2017-06-09 21:19:02

Suffit d'utiliser word-wrap:break-word; dans le css. Elle fonctionne.

-4
répondu mon 2015-07-15 05:07:37