Ich versuche Text vertikal zu zentrieren & amp; horizontal in jQuery Fortschrittsbalken. Ich habe es horizontal zentriert, aber nicht vertikal . Hier ist, was ich im Moment habe
Mein HTML :
Mein CSS :
Mein JavaScript :
Der vertical-align Stil verhält sich, wenn er auf Elemente auf Blockebene angewendet wird, selten so, wie Sie es erwarten würden.
Die Verwendung, die Sie hier gezeigt haben, funktioniert gut ... mit Tabellenzellen. Es verhält sich wie die alte und veraltete Eigenschaft HTML valign . Das Verhalten unterscheidet sich für Inline-Elemente, wo es sich wie die alte und veraltete Eigenschaft align HTML verhält.
Wenn Sie es auf Boxelemente anwenden (wie Ihr div), ignoriert der Browser es einfach ( siehe Spezifikation )
Ihre Optionen für die vertikale Ausrichtung in einem Blockelement sind begrenzt. Sie können entweder:
1) Verwenden Sie Linienhöhe, um den gesamten vertikalen Raum zu füllen. Der Browser richtet den Text vertikal in seiner Zeile aus. Der Vorteil ist, dass es keine zusätzlichen Umbruch-Tags benötigt. Das Problem ist, dass Sie mit einer vordefinierten Höhe arbeiten müssen.
2) Verwenden Sie absolute Positionierung. Der Vorteil dieses Ansatzes ist die Genauigkeit - Sie können den Text genau dort platzieren, wo Sie ihn haben möchten. Die absolute Positionierung ist auch ziemlich intuitiv. Die Nachteile sind, dass Sie ein zusätzliches Wrapping-Tag benötigen, und Sie müssen mit vordefinierten Höhen arbeiten.
Die einzige Vorsichtsmaßnahme, die Sie haben, ist die Verwendung von Prozenten. Sie können es entweder in line-height oder als top / bottom in Kombination mit der absoluten Position verwenden. Hier ist ein Modell Ihres gleichen Codes, mit einem Prozent top , um das Div in die Mitte zu schieben.
jsFiddle: Ссылка
Dokumentation