Ich habe feste Höhe Divs, die Text in ihnen enthalten. Ich möchte, dass der Text vertikal in der Mitte des div ausgerichtet wird, aber das Problem liegt in der Tatsache, dass ein Teil des Textes einzeilig ist und sich ein Teil auf zwei Zeilen verteilt. Für IE8, Chrome und Firefox bietet die Verwendung von display: table-cell und vertical-align: middle die Lösung, die ich brauche:
JS Fiedel ist hier . Entfernen Sie das Sternchen von width: 300px , um die Formatierung zu sehen, wenn sich der Text in einer Zeile befindet.
IE7 unterstützt jedoch die Eigenschaft display: table-cell nicht. Die einzigen Lösungen, die ich gefunden habe, gelten nur für einzelne Zeilen und nicht für Text, der 1 oder 2 Zeilen lang sein kann. Wie kann ich es in IE7 wie in modernen Browsern anzeigen lassen, ohne Skripte zu verwenden?
Wie wäre es mit einem IE7-CSS-Aufruf, indem Sie position:relative auf div und absolute auf h6 setzen und den Code für vertical-align für moderne Browser beibehalten.
ie7.css
%Vor%Das Ziel ist, den IE7 "vorzeigbar" zu machen - egal, was Sie tun, er wird nie so hübsch aussehen wie ein moderner Browser. Für mich ist es die Kopfschmerzen nicht wert (nicht einmal ein bisschen).
Persönlich habe ich begonnen, Padding zu benutzen, um vertikale Ausrichtung zu bekommen. Es ist besonders praktisch, wenn Sie eine feste Höhe verwenden, da Sie die Höhe mit dem Wert der Füllung versetzen können, um ein perfektes Element in voller Höhe zu erhalten.
Hinweis: Diese Lösung funktioniert nur, wenn Sie wissen, welcher Text im Voraus in <h6> kommt. Wenn Sie es dynamisch hinzufügen, würde ich Wordcounting vorschlagen, um herauszufinden, ob es umwickelt oder nicht.
Lösung:
HTML
%Vor%CSS
%Vor%Geige: Ссылка
Snippet (wie Geige):
Sie können dies mit line-height und vertical-align: middle; erreichen.
Sie können ein Helferspannenelement verwenden, um Ihren Text vertikal auszurichten, wie im folgenden Beispiel:
html
%Vor%css
%Vor%Fiddle: Ссылка
Normalerweise würden wir dafür ein Pseudo-Element verwenden, aber ie7 (was für eine Überraschung!) nicht unterstützt: after,: before ... etc. Beachten Sie auch, dass ie7 keine Anzeige unterstützt: Inline-Block für Elemente, die standardmäßig nicht inline sind, wie div. Um display: inline-block für ein div zu verwenden, müssten Sie den folgenden Hack verwenden:
%Vor%wie hier vorgeschlagen Inline-Block funktioniert nicht im Internet Forscher 7, 6
Ich kenne zwei andere Methoden, Elemente vertikal zu zentrieren als mit Tabellenzellen:
1) Mit Zeilenhöhe:
%Vor%Dies funktioniert nur, wenn der Text in einer einzelnen Zeile ist.
2) position absolute / margin auto
%Vor%Sie müssen vielleicht die Höhe (auto oder einen Wert) verwenden und inline / inline-block anzeigen. Probieren Sie es einfach.
Wichtig ist, dass Sie keine Pixel für die Ausrichtung verwenden, verwenden Sie nur% -s. Funktioniert sogar auf IE5 :)
Tags und Links html css internet-explorer-7