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
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

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é
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
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
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
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
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
source

-7

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

— lun
source