Ich frage mich, ob es eine einfache Möglichkeit gibt, ein reaktionsfähiges Bild vertikal zu zentrieren.
Bitte beachten Sie die folgende jsFiddle: Ссылка
Einfaches HTML:
%Vor%Grundlegende CSS:
%Vor%}
Dies ist die mobile Kopfzeile, die dasselbe Bild verwendet, das in den Tablet- und Desktop-Ansichtsfenstern angezeigt wird. Da das Bild sowieso schon geladen wird, versuche ich, dasselbe Bild zu verwenden, es kleiner zu skalieren und es vertikal auszurichten, so dass ich ein Bild für alle Ansichtsfenster verwenden kann.
Das Problem: Bei der Browser-Größenanpassung wird das Bild zwar kleiner, aber es wird nicht vertikal in der Mitte ausgerichtet.
Das Ziel: Obwohl sich die Breite in diesem Beispiel stark überschneidet, ist dies kein Problem auf meiner Website. Das Ziel ist nur, das Bild vertikal zu zentrieren, wenn der Browser seine Größe ändert.
Ich bin in Ordnung mit einer Javascript / jQuery-Lösung, aber natürlich wird einfaches CSS bevorzugt.
Jede Hilfe wird sehr geschätzt!
Es gibt mehrere Möglichkeiten, dies zu tun - rein CSS oder eine JS-basierte Methode.
Update: Mit dem Aufkommen der CSS-Transformations-Unterstützung, ist hier eine ziemlich elegante Lösung von Positionierungselementen mit reinem CSS. Mit dem angegebenen Markup:
%Vor%Für Ihr CSS:
%Vor% Für CSS können Sie ein Ghost-Element im Container des Elements <img> erstellen. Chris Coyier hat eine exzellente Kritik an dieser Technik geschrieben. Nehmen wir an, Ihr HTML-Code sieht folgendermaßen aus:
Dann wäre Ihr CSS:
%Vor%Der funktionierende CSS-Fix funktioniert in dieser Geige - Ссылка
Oder Sie können eine JS-basierte Methode verwenden:
%Vor%Aber Sie müssen das folgende CSS verwenden:
%Vor% [Edit]: Für die JS-basierte Methode, bei der Sie das Bildelement absolut positionieren, müssen Sie explizit die Dimensionen des .container -Elements angeben oder etwas Inhalt darin haben (aber es verhindert den Zweck weil das Bild über dem Inhalt sein wird). Dies liegt daran, dass das Bildelement aus dem Dokumentfluss entfernt wurde und seine Abmessungen daher die Größe des übergeordneten Containers nicht beeinflussen.
Das Arbeitsbeispiel der JS-Version ist hier - Ссылка
Die Lösung, die Sie haben, funktioniert für alte Browser, aber in naher Zukunft (jetzt hat ungefähr 80% der Browser-Unterstützung) können Sie dies tun, eine viel einfachere und elegante Lösung:
%Vor%Also habe ich etwas gefunden, das genau so funktioniert, wie ich es wollte: Ссылка
Das Problem ist, dass es nur mit der neuesten Version von Bootstrap 2.3.1 funktioniert und ich habe keine Ahnung warum (ich habe 2.3.0 auf meiner Seite).
Nun habe ich meine Frage beantwortet und eine noch größere Frage aufgeworfen: Was bewirkt, dass das funktioniert?
Beachten Sie, dass der folgende Code verwendet wird:
HTML
%Vor%CSS
%Vor%HINWEIS: Dies funktioniert NICHT ohne die neueste Version 2.3.1 von Bootstrap.
Ich werde eine Frage stellen, um zu sehen, ob jemand weiß!
Sie sollten diesen Code unten verwenden.
Es funktioniert für mich: D
Siehe JSFiddle Ссылка
HTML
%Vor%CSS
%Vor%Tags und Links jquery css responsive-design twitter-bootstrap