Le centre d'alignement de l'étendue HTML ne fonctionne pas?

107

J'ai du HTML:

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

La Div est en train de modifier l'espacement sur mon document, je souhaite donc utiliser une plage 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éparer ça?

ÉDITER:

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>
html css David19801
la source
1
Votre div "change l'espacement"? Que veux-tu dire par là? Et votre span ne le sera pas car par défaut, c'est un élément en ligne , alors qu'un div est un élément de niveau bloc .
Bojangles
Bonjour JamWaffles, Par "espacement", je veux dire que le div ajoute de l'espace au-dessus et au-dessous du contenu. L'envergure ne fait pas cela.
David19801
Utilisez Firebug ou l'inspecteur Chrome pour voir quelles règles CSS sont appliquées à votre élément et recherchez celle qui ajoute un remplissage ou une marge. Il est également possible que les éléments environnants aient un remplissage / marge.
Bojangles
5
text-align=centerdevrait êtretext-align:center
n611x007

Réponses:

197

Un div est un élément de bloc et s'étendra sur 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 comme propriété CSS. Aligner 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 text-alignpropriété CSS sur le conteneur.

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

Veuillez utiliser le style suivant. margin:autonormalement utilisé pour centrer le contenu. display:tableest nécessaire pour l' spanélément

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
Chris J
la source
37

L' alignattribut est obsolète. Utilisez text-alignplutôt CSS . En outre, la plage ne centrera pas le texte à moins que vous n'utilisiez display:blockou display:inline-blocket ne définissiez une valeur pour la largeur, mais elle se comportera alors de la même manière qu'un div (élément de bloc).

Pouvez-vous publier un exemple de votre mise en page? Utilisez www.jsfiddle.net

Lucifer Sam
la source
A très bien fonctionné! Merci.
dallinchase
Est-ce que je ne peux pas aligner deux éléments en ligne différemment tout en les conservant des éléments en ligne?
Daniel Springer
11 
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 ceci aussi

OBJECTIF
la source
2

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

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

Ça devrait être:

<span style="border:1px solid red;text-align:center">
nhazéen
la source
1

L'étendue 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>
marque stewart
la source
-7

Utilisez simplement word-wrap:break-word;dans le css. Ça marche.

lun
la source