Problem beim vertikalen Ausrichten von Text eines Elements, das sich über zwei Zeilen erstreckt
Ich möchte etwas Text in der Mitte meines Elements mit CSS ausrichten. Das ist mein Markup:
%Vor%Und das relevante CSS:
%Vor% Normalerweise, um .quote in der vertikalen Mitte von #testimonial zu erhalten, würde ich Folgendes tun:
Aber das bricht das Layout, weil der Text in .quote mehr als eine Zeile umfasst.
Wie Sie sehen können, habe ich versucht, vertical-align: middle; zu tun, und das funktioniert auch nicht.
Jede Hilfe wird geschätzt. Prost.
5 Antworten
Ich habe kürzlich diese vertikale Zentrierung herausgefunden von etwas, das undefinierte Dimensionen hat, passt sehr gut zu vertical-align: middle; in Kombination mit line-height: 0; .
Schau dir diese Demonstrationsgeige an.
HTML:
%Vor%CSS:
%Vor%da niemand mit der Tabellenzellenlösung geantwortet hat ..
Hier geht's - mit einer IE6 / 7-Lösung (obwohl es einen yukky HTML-Hack beinhaltet), wie @thirtydot in Kommentaren sagt, Tabellenanzeigeeigenschaften werden von IE7 und darunter nicht unterstützt -
Wenn Sie das zusätzliche HTML-Element nicht wollen / mögen, könnten Sie einfach IE7 und unterhalb einige obere Auffüllung auf .quote geben - so dass es, obwohl es nicht vertikal zentriert wäre, ein akzeptabler Fallback sein könnte
CSS:
%Vor%IE CSS:
%Vor%HTML:
%Vor%Diese Website bietet eine Fülle von Optionen für die vertikale Zentrierung mit CSS .
> Wenn Sie eine Höhe auf .quote setzen können, würde Methode 2 in dieser Situation funktionieren:
Eine weitere Option ist die Verwendung der display:table-cell; vertical-align:middle; -Methode in CSS, aber diese Option funktioniert nicht in IE, daher müssen Sie auch eine IE-spezifische Version festlegen.
