Wie kann Text in IE7 vertikal ausgerichtet werden, ohne die CSS-Eigenschaft 'table-cell' zu verwenden?

9

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?

    
Snorbuckle 05.04.2011, 14:13
quelle

8 Antworten

1

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.

Ссылка

%Vor%

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).

    
Dawson 31.10.2014 05:43
quelle
1

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):

%Vor% %Vor%
    
CitiZen 19.11.2014 13:31
quelle
0

Sie können dies mit line-height und vertical-align: middle; erreichen.

%Vor%     
EternalHour 03.11.2014 04:22
quelle
0

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

    
Roumelis George 16.12.2014 09:03
quelle
0

schau dir das an

Ссылка

CSS-Code

%Vor%     
Manoj Babu Balaraman 07.08.2015 08:19
quelle
0

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.

    
blacksunshineCoding 15.08.2015 21:04
quelle
0

Wichtig ist, dass Sie keine Pixel für die Ausrichtung verwenden, verwenden Sie nur% -s. Funktioniert sogar auf IE5 :)

hier ist Demo

%Vor% %Vor%
    
Gagik Sargsyan 28.09.2015 14:22
quelle
-1
%Vor%     
Amit Mirketa 08.01.2015 13:32
quelle

Tags und Links