CSS - Zeilenhöheneigenschaft, wie es funktioniert (einfach)
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 line-height:50px; nur zur Hälfte kommt.
Wenn die small div eine Höhe von 100px 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: margin:50px 0 0 50px; , 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 !!
8 Antworten
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 line-height ist genau das, was klingt. Es wäre anders, wenn es nur die Hälfte der Höhe wäre, da du die font-size usw. erklären müsstest.% Co_de% macht in deinem Fall nur eine blockige Sache mit einer Höhe von line-height und zentriert die Text darin.
Grundsätzlich fügt 100px den Wert line-height 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.
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. Ссылка
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.
Tags und Links html css vertical-alignment alignment