Vertikal zentrierter mehrzeiliger Text

Wenn Sie nur ein einzelnes Wort oder eine einzelne Textzeile haben, gibt es eine clevere Möglichkeit, es mit CSS vertikal in einem Block zu zentrieren. Sie setzen die Zeilenhöhe dieses Textes gleich der Höhe des Feldes. Funktioniert gut, ist aber ein großer Fehler, wenn dieser Text umgebrochen werden muss.

Eine „Sprechblase“ ist ein klassisches Beispiel dafür, wo wir Text sowohl horizontal als auch vertikal zentriert und anpassbar an mehrere Zeilen haben möchten. Dafür gibt es einen kleinen, ziemlich einfachen CSS-Trick mit CSS-Tabellen. Hier ist das Ergebnis

Demo anzeigen   Dateien herunterladen

Das HTML ist nichts Besonderes. Die „Fläche“ ist nur der Bereich, mit dem wir es zu tun haben, wo wir position: relative; setzen können, damit wir den Text in der Sprechblase absolut positionieren können.

<div class="area">
      <div class="bubble">
          <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
      </div>
</div>

Die „Sprechblase“ setzen wir auf display: table;, was allein nicht viel bewirkt, aber dann können wir das <p>-Element darin zu einer Tabelle-Zelle machen, was uns erlaubt, die vertical-align-Eigenschaft darauf anzuwenden.

.area { 
  width: 300px; 
  height: 300px; 
  background: url(../images/abe-bg.png) no-repeat; 
  position: relative;
}

.bubble { 
  position: absolute; 
  left: 93px; 
  top: 21px; 
  width: 135px; 
  height: 84px; 
  display: table; 
}

.bubble p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

Macht den Trick meiner Meinung nach hervorragend. Diese aktuelle Version von CSS-Tricks hat unten im Footer eine kleine Twitter-Sprechblase, für die ich das verwendet habe.

Und was ist mit IE <= 7?!

IE 8 unterstützt CSS-Tabellen, aber IE 7 und darunter nicht. Zu schade, zu traurig. Stattdessen erhalten Sie dies

… könnte schlimmer sein. Ich hatte gehofft, das ie8.js von Dean Edwards würde das lösen, aber bisher ohne Erfolg.

UPDATE 1

Boris Kuzmic kommentiert unten mit einer perfekten Lösung, um IE 6 und 7 perfekt zum Laufen zu bringen

<!--[if lt IE 8]>
<style>
.bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center;}
.bubble p { position: relative; font-size: 11px;
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<![endif]-->

UPDATE 2

Boris erneut mit einer Methode, um den IE-Ausdruck speichersicher zu machen (auf diese Weise muss er nur einmal ausgewertet werden, nicht kontinuierlich ausgeführt).

.bubble p { position: relative; font-size: 11px;
margin-top: inherit;
*clear: expression(
style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
style.clear = "none", 0
);
}

UPDATE 3

James John Malcolm meldet sich mit einer weiteren Technik für IE zu Wort. Sie ist etwas weniger semantisch (erfordert ein zusätzliches div), aber sie benötigt keinen Ausdruck.

Wickeln Sie zunächst die innere <p>-Element in ein neues <div> und dann

<!--[if lt IE 8]>
<style>
.bubble div { position: absolute; top:50%;}
.bubble div p {position: relative; top: -50%}
</style>
<![endif]–>

UPDATE 4

Eine weitere Methode von Andy Howard.