web-dev-qa-db-fra.com

"Text-align: center" ne fonctionne pas dans un élément span

Cela fait quelque temps que je n'ai pas utilisé HTML et CSS, il se peut que j'oublie quelque chose, mais pour une raison quelconque, une balise "style" avec le jeu de propriétés "text-align" ne fonctionne pas, même dans le plus simple contexte. Je suis sur le point de vous montrer l'ensemble du dossier que j'ai, mais mon problème réside uniquement dans les deux commentaires que j'ai. Ne vous inquiétez pas des autres choses. c'est pour un petit projet de passion sur lequel je travaille. 

Donc, voici le fichier entier. J'ai plein de choses dedans qui ne sont ni pertinentes ni importantes; concentrez-vous simplement sur le code dans les deux commentaires.

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>

</script>
</body>
</html>

La partie "Coded by AnnualMelons" est supposée être au centre, mais ce n'est pas le cas. Au moins pour moi ce n'est pas.

Je sais que l’autre partie du fichier n’est pas pertinente, mais j’ai pensé que je pourrais tout aussi bien vous montrer que cela pourrait être un problème externe.

Je suis sûr que je commets juste une erreur stupide parce que je ne l'ai pas fait depuis un moment, mais ça ne fonctionne pas ... alors oui. J'utilise Firefox comme navigateur Web au cas où cela aiderait.

Merci!

htmltext-align
9
KarteMushroomPandas

L'élément <span> est, par défaut, un élément "inline" . Signification différente de éléments de niveau bloc } _ (<div><h1><p> etc.), la plage ne prend que autant d’espace horizontal que son contenu.

text-align: center IS fonctionne, mais vous l'appliquez à un élément dont la largeur n'est pas supérieure à son contenu (comme tous les éléments de bloc).

Je vous recommande de changer l'étendue en un élément <p> ou de spécifier la propriété display: block sur votre étendue. 

_ { Voici un JSfiddle à démontrer qu'un <span> avec display: block; text-align: center et un <p> avec text-align: center; ont le même effet.

J'espère que cela pourra aider!

23
Morklympious

Utilisez un p ou un div plutôt qu'une étendue. Le texte est un élément en ligne, tout comme une étendue. Pour que text-align fonctionne, il doit être utilisé sur un élément de niveau bloc (p, div, etc.) afin de centrer le contenu en ligne.

exemple:

<div style="text-align: center">Coded by AnnualMelons</div><br>
3
David