webentwicklung-frage-antwort-db.com.de

Das "text-align: center" funktioniert nicht in einem Spannelement

Ich habe HTML und CSS seit einiger Zeit nicht mehr gemacht, daher vergesse ich vielleicht etwas, aber aus irgendeinem Grund funktioniert ein "style" -Tag mit dem Eigenschaftssatz "text-align" selbst im einfachsten Kontext nicht. Ich zeige Ihnen gerade die gesamte Datei, die ich habe, aber mein Problem ist nur in den beiden Kommentaren, die ich habe. Mach dir keine Sorgen über das andere Zeug; Ich arbeite an einem kleinen Passionsprojekt. 

Hier ist also die ganze Datei. Ich habe viel Zeug, das weder relevant noch wichtig ist. konzentrieren Sie sich einfach auf den Code in den beiden Kommentaren.

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

Der Teil "Coded by AnnualMelons" soll in der Mitte sein, ist es aber nicht. Zumindest für mich ist es nicht so.

Ich weiß, dass der andere Teil der Datei nicht relevant ist, aber ich dachte, ich könnte es Ihnen genauso gut zeigen, da es sich um ein externes Problem handeln kann.

Ich bin sicher, ich mache nur einen dummen Fehler, weil ich das eine Zeitlang nicht getan habe, aber es funktioniert nicht ... also ja. Ich benutze Firefox als meinen Webbrowser, falls das hilft.

Vielen Dank!

9

Das <span>-Element ist standardmäßig ein "Inline" -Element . Im Gegensatz zu Elementen auf block-Ebene (<div><h1><p> usw.) beansprucht der Bereich nur so viel horizontalen Raum wie sein Inhalt.

text-align: center IS funktioniert, aber Sie wenden es auf ein Element an, dessen Breite nicht größer als sein Inhalt ist (wie bei allen Blockelementen).

Ich empfehle, entweder die Spanne in ein <p>-Element zu ändern oder die display: block-Eigenschaft für Ihre Spanne anzugeben. 

Hier ist ein JSfiddle, um zu demonstrieren dass sowohl ein <span> mit display: block; text-align: center als auch ein <p> mit text-align: center; den gleichen Effekt erzielen.

Hoffentlich hilft das!

23
Morklympious

Verwenden Sie ein p oder ein div anstelle eines Bereichs. Text ist ein Inline-Element und somit auch eine Spanne. Damit Textausrichtung funktioniert, muss er für ein Blockebenenelement (p, div usw.) verwendet werden, um den Inline-Inhalt zu zentrieren.

beispiel:

<div style="text-align: center">Coded by AnnualMelons</div><br>
3
David
.span { 
       text-align: center;
       width: -webkit-fill-available;
      }

Dies hat bei mir funktioniert und der Text in meinem span-Tag ist jetzt mittig ausgerichtet.

0
Vivek Pandey

Verwenden Sie dies mit Stil

margin-left: 50%;

beispiel-

   <span style="margin-left: 45%;">Centered Text</span>
0