Vertical-align auf h1 einfach nicht funktioniert?
Ich versuche, richten Sie den text in eine h1
vertikal in der Mitte, zu sehen, wie der text umbrochen kann, die es braucht, um schön Aussehen, egal ob 1 Zeile oder 2.
Dies ist die css, die ich benutze:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
Html ist ganz einfach:
<h1>title</h1>
Egal welchen Wert ich eingeben für vertical-align
, der text ist immer an der Spitze der h1
element.
Bin ich miss-Verständnis der vertical-align
Eigenschaft?
- Siehe phrogz.net/css/vertical-align
- Dank Dan, ich habe die Erfahrung gemacht, dass die Seite auch.. der einzige Unterschied, den ich sehe, ist, dass Sie es tun, auf einem td-element, für den rest, ich bin das gleiche zu tun.. also ich bin mir nicht ganz sicher, was ich vielleicht anders machen.
- weiter unten auf der Seite erklären Sie, dass
vertical-align
hat keine Auswirkung auf andere Elemente als die Tabellenzellen und inline-Elemente; auf block-Elemente, es legt nur den Wert vererbt zu werden. so bekommen vertikale Zentrierung auf die anderen Elemente einer anderen Methode alsvertical-align
verwendet werden muss. - Ahh ich sehe, habe nicht bemerkt, dass ein Teil. Danke für die info! Ich denke, ich werde Anzeige es in einer Tabelle oder finden einen anständigen css-hack. Vielen Dank für deine Hilfe.. bitte senden Sie Ihre Lösung als Antwort, damit kann ich markieren Sie es 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sind keine CSS-hacks benötigt. Wenn ich Sie richtig verstehe, dann Sie können verwenden Sie dieses CSS:
Sehen demo-fiddle das entspricht einer minimalen Höhe von 30px;
Einen Hinweis über vertical-align: dieser Stil funktioniert nur in Verbindung mit - und ist berechnet mit Bezug auf - die line-height Stil. Also die Einstellung line-height auf 10px, putting text mit Höhe 12pt lässt keinen Raum zum ausrichten an alle. Aber die Einstellung line-height auf 30px führen würde zu viel Raum zwischen den Zeilen mehr text. Dies zeigt einen trick für die vertikale Ausrichtung mehrerer Zeilen text, aber das ist nur dann erforderlich, wenn Sie eine Feste Höhe container. In diesem Fall ist die Höhe des Containers (h1-element) ist fließend, so können Sie diese einfache Lösung Polsterung.
Ich weiß nicht, über vertikale ausrichten, aber wenn Sie hinzufügen height-Eigenschaft, und legen Sie Höhe und line-height Eigenschaften gleichen, bekommen Sie die vertikal-align: center Effekt
Fügen Sie einfach ein
float
Eigenschaft und verwendenpadding-top: 50%
zum Beispiel: