HTML span align center ne fonctionne pas ?

Question

HTML span align center ne fonctionne pas ?

Demandé el 5 de Décembre, 2011: Quand la question a-t-elle été
103835 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un peu de HTML :

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

Le Div modifie l'espacement de mon document, je veux donc utiliser un span à la place.

Mais le 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 cela ?

EDIT :

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>

Demandé el 5 de Décembre, 2011 par David19801

1 votes

Votre div "change l'espacement" ? Qu'est-ce que vous entendez par là ? Et votre span ne le fera pas, car par défaut, c'est un élément de type en ligne alors qu'un div est un élément bloc élément de niveau.

Commenté el 5 de Décembre, 2011 par Bojangles

0 votes

Bonjour JamWaffles, Par "espacement", je veux dire que la division ajoute de l'espace au-dessus et au-dessous du contenu. Le span ne fait pas cela.

Commenté el 5 de Décembre, 2011 par David19801

0 votes

Utilisez Firebug ou l'inspecteur de Chrome pour voir quelles règles CSS sont appliquées à votre élément, et recherchez celle qui ajoute un padding ou une marge. Il est également possible que les éléments environnants aient un padding/margin.

Commenté el 5 de Décembre, 2011 par Bojangles

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

218voto

William Points 7664

Un div est un élément de bloc, qui s'étend sur la largeur du conteneur, sauf si une largeur est définie. Un span est un élément en ligne, et sa largeur correspond à celle du texte qu'il contient. Actuellement, vous essayez de définir align comme une 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 déprécié. Vous devez utiliser l'attribut 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>

Répondu el 5 de Décembre, 2011 par William (7664 Points )

1 votes

Le problème avec la deuxième méthode se pose lorsque le conteneur doit être aligné à gauche et que le texte qu'il contient doit être centré. Comme dans le cas de cette question . J'ai essayé la méthode dépréciée car elle semble être la seule solution, mais elle ne fonctionne pas dans Chroimum ni dans Firefox.

Commenté el 4 de Avril, 2021 par Yagamy Light

Answer 3

55voto

Chris J Points 344

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

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

Répondu el 19 de Août, 2013 par Chris J (344 Points )

Answer 4

40voto

Lucifer Sam Points 1768

El align est déprécié. Utilisez CSS text-align à la place. En outre, le span ne centrera pas le texte, sauf si vous utilisez la fonction display:block o display:inline-block et définir une valeur pour la largeur, mais il se comportera alors de la même manière qu'un div (élément de bloc).

Pouvez-vous afficher un exemple de votre disposition ? Utilisez www.jsfiddle.net

Répondu el 5 de Décembre, 2011 par Lucifer Sam (1768 Points )

0 votes

Cela a bien fonctionné ! Merci.

Commenté el 26 de Novembre, 2014 par dallinchase

0 votes

Ne puis-je pas aligner deux éléments en ligne différemment tout en les gardant en ligne ?

Commenté el 24 de Janvier, 2016 par Dani Springer

0 votes

El display:block fait passer le texte à une nouvelle ligne . Le site inline-block ne fonctionne pas du tout.

Commenté el 4 de Avril, 2021 par Yagamy Light

Afficher 1 autres commentaires

Answer 5

14voto

AIMABLE Points 575

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 ceci

Répondu el 4 de Février, 2016 par AIMABLE (575 Points )

Answer 6

2voto

nhazean Points 31

En plus de toutes les autres explications, je crois que tu utilises l'égalité "=" au lieu de deux points ":" :

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

Il devrait l'être :

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

Répondu el 6 de Avril, 2017 par nhazean (31 Points )

HTML span align center ne fonctionne pas ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

HTML span align center ne fonctionne pas ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: