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 als vertical-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 🙂
InformationsquelleAutor Naatan | 2011-07-23
  1. 8

    Sind keine CSS-hacks benötigt. Wenn ich Sie richtig verstehe, dann Sie können verwenden Sie dieses CSS:

    h1 {
    font-size: 12pt;
    line-height: 10px;
    padding: 10px 0;
}

    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.

    • In meinem Fall habe ich tatsächlich brauchen, die vordefinierte Höhe. Der link zu dem trick, den Sie zur Verfügung gestellt, sollte tun gut für die! Vielen Dank 🙂
    InformationsquelleAutor NGLN
  2. 4

    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

    h1
{
    font-size: 12pt;
    line-height: 50px;
    height: 50px;
}
    • Danke, ich brauche die line-height zu kontrollieren, den Abstand zwischen dem text aber.
    InformationsquelleAutor hakan
  3. 0

    Fügen Sie einfach ein float Eigenschaft und verwenden padding-top: 50% zum Beispiel:

    h1 {
  font-size: 12pt;
  line-height: 10pt;
  min-height: 30px;

  position: absolute;
  float: center; /* If you want it to be centered */
  padding-top: 50%;
}
    • Zentrieren Sie es mit padding-top 50% erfordert ein anderes übergeordnetes element, auch ich brauchen würde, zu wissen, das generiert werden die Höhe des Texts, um einen Ausgleich für die Polsterung.., die Niederlagen der Zweck.
    InformationsquelleAutor Nathan Campos
Schreibe einen Kommentar