vertical-alignment
Die einfache Antwort ist, dass das Zeichen mit der Zeilenhöhe in der vertikalen Mitte der Zeile liegt, also hat eine Zeile mit einer Höhe von 100px den Text in der Mitte von, also 50px.
Ok, ich bin mir ziemlich sicher, dass ich es jetzt habe, ich werde meine eigene Frage beantworten, dank all Ihrer Antworten wäre das eine grafische Erklärung (die mir immer hilft):
Dies ist nur eine Ergänzung zu jarrets Antwort (der erste, der es IMHO Nagel)
Danke für all die hilfreichen Antworten
BTW: Entschuldigung für die schrecklichen Kunstwerke.
Ich denke %code% ist genau das, was klingt. Es wäre anders, wenn es nur die Hälfte der Höhe wäre, da du die %code% usw. erklären müsstest.% Co_de% macht in deinem Fall nur eine blockige Sache mit einer Höhe von %code% und zentriert die Text darin.
Grundsätzlich fügt %code% den Wert %code% am oberen und unteren Rand des Textes hinzu, während das Hinzufügen von Rändern nicht dafür verantwortlich ist.
Wenn Sie die Eigenschaft line-height auf 100px setzen, bedeutet dies, dass der Text vertikal in der Mitte einer Zeile mit einer Höhe von 100px zentriert wird. Das heißt, es wird um 50px platziert. Wenn Sie die Ränder auf 50px einstellen, erhalten Sie ein ähnliches Ergebnis, aber Sie werden feststellen, dass es nicht genau zentriert ist.
Wenn Sie einem Element eine Zeilenhöhe von 100% geben (in Ihrem Beispiel entspricht das 100 Pixel), wird der Text vertikal in der Mitte einer Zeile platziert, die 100 Pixel hoch ist.
Dies funktioniert nicht, da die Zeilenhöhe spezifisch für den Text und nicht für die tatsächliche Höhe von Elementen wie divs ist. Ich würde vorschlagen, Höhe und nicht Zeilenhöhe zu verwenden, wenn Ihr Betreff nicht Text ist.
Wurde bereits beantwortet, aber ich dachte, ich könnte hinzufügen, dass die Formel normalerweise lautet:
Der Unterschied zwischen Zeilenhöhe und Schriftgröße wird als "Leading" bezeichnet. Dann teile dieses Führende durch 2, um die Hälfte zu erhalten, die über und unter deinen Text gesetzt wird, wodurch es vertikal zentriert wird.
Der folgende Foliensatz erklärt viel über die Linienhöhe. Sie können bei Folie 72 für das, was ich oben erklärt habe, beginnen, aber ich würde empfehlen, das ganze Set durchzugehen.
Im Wesentlichen hilft die Zeilenhöhe dabei, "führend" und "halbführend" zu setzen. Das 100px-Konto berücksichtigt die Gesamthöhe des Elements, und der Text wird innerhalb dieses Bereichs "vertikal ausgerichtet". Die Hälfte geht über und halb unter.
Das erklärt besser als ich. Ссылка
Also in dieses einfache Beispiel habe ich als Endergebnis:
Das ist eine sehr einfache Frage, aber ich kann mich einfach nicht darum kümmern.
Um die vertikale Zentrierung der verwendeten Zahlen zu erreichen:
%Vor%Was großartig funktioniert und es auf Versuch und Irrtum Basis gemacht hat.
Meine Frage ist genau warum die %code% nur zur Hälfte kommt.
Wenn die %code% %code% eine Höhe von %code% hat und ich eine Positionierung relativ zu ihr, sollte die Hälfte davon nicht auf die Hälfte zentriert sein.
Das verwirrt mich besonders, wenn ich ein div zentriere :
Ich würde verwenden: %code% , um dies zu erhalten:
Mir ist klar, dass diese Frage ein Overkill sein könnte, da die Antwort vielleicht (wahrscheinlich sehr einfach) sein wird, tut mir leid! aber ich denke es ist besser das "warum funktioniert das nicht" Fragen;)
Vielen Dank im Voraus !!