Das "text-align: center" funktioniert nicht in einem span-Element

7

Ich habe HTML und CSS schon eine Weile nicht mehr gemacht, also könnte ich etwas vergessen, aber aus irgendeinem Grund funktioniert ein "style" -Tag mit der Eigenschaftsgruppe "text-align" nicht einmal im einfachsten Kontext. Ich bin dabei, dir die ganze, vollständige Datei zu zeigen, die ich habe, aber mein Problem ist nur in den zwei Kommentaren, die ich habe. Mach dir keine Sorgen über die anderen Sachen; Es ist für ein kleines Leidenschaftsprojekt, an dem ich arbeite.

Also hier ist die ganze Datei. Ich habe viele Dinge darin, die weder relevant noch wichtig sind. Konzentriere dich einfach auf den Code in den beiden Kommentaren.

%Vor%

Der Teil "Coded by AnnualMelons" soll im Mittelpunkt stehen, ist es aber nicht. Zumindest für mich ist es nicht.

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

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

Danke!

    
KarteMushroomPandas 25.08.2014, 01:00
quelle

2 Antworten

16

Das <span> -Element ist standardmäßig ein "Inline" -Element . Im Gegensatz zu Elementen auf Blockebene ( <div> <h1> <p> usw.) dauert die Zeitspanne nur < stark> so viel horizontaler Raum wie sein Inhalt.

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

Ich empfehle, entweder den Bereich in ein <p> -Element zu ändern oder die display: block -Eigenschaft in Ihrem Bereich anzugeben.

Hier ist eine JSfiddle, die demonstriert , dass sowohl ein <span> mit display: block; text-align: center als auch ein <p> mit text-align: center; erreichen den gleichen Effekt.

Hoffe das hilft!

    
Morklympious 25.08.2014, 01:04
quelle
3

Verwenden Sie ein p oder div anstelle einer span. Text ist ein Inline-Element und auch eine Spanne. Damit text-align funktioniert, muss es auf einem Element auf Blockebene (p, div usw.) verwendet werden, um den Inline-Inhalt zu zentrieren.

Beispiel:

%Vor%     
David 25.08.2014 01:05
quelle

Tags und Links