Es ist auch möglich, dies mit div's und CSS zu tun, ohne px-Größen oder Tabellen zu verwenden
<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
<div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 ya no se centra</div>
</div>
</div>
gut, aber das Problem ist, dass man, wenn man den Browser verkleinert, nicht zum Anfang scrollen kann. D.h. wenn ich ein Menü oben habe, kann ich es nicht sehen!
Was passiert, wenn man unterschiedliche Bildgrößen hat, aber egal welche Bildgröße man möchte, alle zentriert sind. Normalerweise im jQuery-Galerie-Fall. Ich kämpfe seit zwei Tagen damit. Jede Hilfe wäre sehr willkommen.
Hallo, ich habe etwa 50 Beiträge auf meinem Blog veröffentlicht. Jetzt muss ich meine Blog-Vorlage mit einer neuen ändern. Ich habe auch das Bild hochgeladen. Das Problem mit meiner neuen Vorlage ist, dass mein zuvor hochgeladenes Bild nicht an der gewünschten Position ist. Ich muss das Bild neu hochladen, damit es zu meiner neuen Vorlage passt. Kann mir jemand dabei helfen? Damit das zuvor hochgeladene Bild auf (300x300 Pixel) erzwungen wird. Vielen Dank im Voraus.
ICH LIEBE DICH!! Ähm, vielen Dank. Ich habe versucht herauszufinden, wie man eine Grafik mit absoluter Positionierung auf einem zentrierten Body-Container platziert. Mir ist aufgefallen, dass Sie die Grafik durch „left: 50%“ zentriert haben und dann mit meiner Containerbreite, die ich durch 2 geteilt und die Maße angepasst habe, um eine perfekte Passform zu erzielen;). „left: 50%“ ist ein sehr wichtiges Element bei der Verwendung von absoluter Positionierung. Verdammt, wenn ich das nur vorher gewusst hätte, hätte ich mein Design und meinen CSS-Code nicht geändert :(. Na ja, man lebt und lernt :D
Ich möchte ein Bild im Hintergrund meiner Webseite (oben mittig). Unterschiedliche Bilder auf jeder Seite. Darüber möchte ich einen 1000 Pixel breiten Div in der Mitte der Seite mit dem Inhalt haben. Ich möchte, dass alles in der Mitte bleibt, wenn ich das Browserfenster ändere. Wie?
Dies funktionierte für mich zur vertikalen Zentrierung. Ich kann keine halbe Höhe verwenden, da ich die Höhe nicht kenne. Also habe ich Prozent verwendet
Danke, Matthew Buchanan! Das ist perfekt – schön und sauber und funktioniert für unterschiedliche Bildgrößen. Es funktioniert bei mir in Firefox, Chrome, Safari, Opera und IE 8 und 9.
Danke für das Tutorial, ich versuche, einen Absatz unter dem zentrierten Bild zu platzieren, aber wenn ich das tue, bleibt der Absatz oben links im Browserfenster.
/* Höhe auf 100% setzen */ #container ul li{ display:inline-block; height:100%;
} /* Dann vertikal so gut wie möglich ausrichten */ #container ul li img{ vertical-align:middle;
} /* HINWEIS: Die Bilder haben auch keine feste Größe :) Dies funktioniert in Firefox, ich benutze es schon seit einiger Zeit, daher muss ich es cross-browser getestet haben, kann mich aber nicht mehr erinnern. Probieren Sie es aus! */
Es verwendet im Grunde, wie man Bilder zentriert, und es kann einen Server-Zeitstempel für den Anfang übernehmen. Das CSS kann auch leicht nach eigenen Wünschen modifiziert werden.
Hallo Chris – oder irgendein Genie da draußen, gibt es eine „responsive“ Möglichkeit, dies zu tun? Wenn man also den Browser mit „img{max-width:100%;height:auto}“ verkleinert, damit die Bilder die Größe ändern, gibt es eine Möglichkeit, sie sowohl vertikal als auch horizontal in einem DIV zu zentrieren?
Hallo.. Danke für das Tutorial. Ich beziehe mich schon lange auf css-tricks.com für alle möglichen Dinge, und als Entwickler ist Ihre Seite eine großartige Ressource und hilft, die Entwicklung einiger meiner Projekte zu beschleunigen. Also Daumen hoch! :)
Man kann auch die line-height-Methode verwenden; genau wie man eine einzelne Textzeile vertikal ausrichten würde.
Setzen Sie den Container des Bildes auf eine bestimmte Höhe und geben Sie ihm auch eine Zeilenhöhe mit demselben Wert wie die Höhe. Geben Sie dann dem Bild im Container display: inline-block oder einfach inline.
Wenn Sie das Bild auch zentrieren möchten, da es bereits als inline angezeigt wird, können Sie dem Container text-align: center geben, wodurch das Bild ebenfalls zentriert wird.
Ich habe es in einem meiner Projekte ausprobiert und festgestellt, dass Ihre CSS-Technik für Hintergrundbilder in Chrome nicht funktioniert, wenn ich den HTML5-Doctype verwende. Ich muss den HTML5-Doctype entfernen, damit es funktioniert.
Best Practices Chris :) Diese Lösung hängt vom UX ab, wie meine Beobachtung dies als Erfahrung für eine Seite im Aufbau darstellt. Und Ihre Technik ist dafür eine Best Practice.
html { width:100%; height:100%; background:url(logo.png) center center no-repeat;
}
Ein von mir berechneter Vorschlag: Die Bildgröße sollte 206 Pixel quadratisch sein, da dies auch responsiv funktioniert :)
Hier ist meine Technik für Textinhalt, aber nicht für lt ie8
Ich habe festgestellt, dass dieser CSS-Code die Aufgabe erfüllt. Er funktioniert, wenn Sie die Abmessungen der Bildklasse durch Prozentsätze anstelle von Pixeln ersetzen. Er scheint die tatsächlichen Pixel selbst zu berechnen. Er ist ziemlich einfach.
Es gibt ein kleines mathematisches Prinzip dahinter: Machen Sie einfach den oberen Prozentsatz zur Hälfte dessen, was Sie von der Höhe abziehen. In meinem Fall habe ich 20 % abgezogen, was bedeutet, dass die obere Position 10 % beträgt. Ich weiß nicht, ob es für jeden Wunsch richtig funktioniert, aber ich hatte seitdem keine Probleme mehr damit!
Schauen Sie sich diese animierte, skriptlose Galerie-Demo an, die diese Prinzipien auf Bilder unterschiedlicher Größe anwendet, ohne die Größe anzugeben.
Das ist ein wirklich großartiger Artikel über die horizontale und vertikale Ausrichtung von Bildern und Text in der Mitte. Hier gebe ich ein kleines Beispiel für Bild und Text mittig in einem Div ausrichten
Ändern Sie einfach Breite und Höhe, entfernen Sie 'bottom' oder was auch immer, um es an einer Seite zu befestigen. Aktualisieren Sie Ihre Antwort oder besorgen Sie sich einen Job bei McDonalds. #element { position: absolute; margin: auto; bottom: 0; left: 0; top: 0; right: 0; width: 960px; height: 450px;
}
function c() {
var a = (window.innerHeight - 600) / 2;
//replace window.innerHeight with parent div width
var b = (window.innerWidth - 800) / 2;
//replace window.innerWidth with parent div width
document.getElementsByTagName("body")[0].style.padding = a + "px" + " " + b + "px";
//replace body with parent div width
}
setInterval(c, 100); //if window size changes. can remove, but need to call function at least once.
Es ist auch möglich, dies mit div's und CSS zu tun, ohne px-Größen oder Tabellen zu verwenden
Es wird hier erklärt, aber auf Spanisch :(
Sie könnten Flexbox verwenden (Fiddle)
Aber die Flex-Eigenschaft wird nicht in IE-Versionen unterstützt
Erklärung mit Google Page Translator.
Das nennt man „The dead center“ oder irre ich mich?
Danke, das hilft sehr
Hier wird es auf Englisch erklärt
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Das war genau das, was ich brauchte, danke.
Ich sah mir das Beispiel an, funktionieren diese (?) wenn der Container einen oberen Rand hat.
gut, aber das Problem ist, dass man, wenn man den Browser verkleinert, nicht zum Anfang scrollen kann. D.h. wenn ich ein Menü oben habe, kann ich es nicht sehen!
Warum schreibt jeder im Universum die Hintergrund-Kurzschreibweise falsch?
Das ist der richtige Weg und der einzige Weg, der in ALLEN Browsern funktioniert, die die Hintergrund-Kurzschreibweise unterstützen
background: #FFF url() repeat fixed left top;
/rant
Danke, ich stimme Ihnen zu, WARUM
Craig, syntaktisch können Ihre Eigenschaften in jeder Anordnung sein
background: #fff url() fixed left top;
ist im Wesentlichen dasselbe wie
background: url() fixed 0 0 #fff;
egal wie man es betrachtet, es tut genau dasselbe.
schöne Informationen, danke!
Danke. Das hat mir sehr geholfen.
Brillant!!
Nicht wahr? Ich liebe das. Das hat mich so glücklich gemacht
Vertikal und rechtsbündig fixierte Div relativ zum Viewport! #fuckyeah!
Mit FF, keine feste Bildgröße
.container { text-align:center; height:50%; } .container img { position:relative; top:25%; }IE versteht „top“ nicht in %… :(
Beste Lösung für mich. Danke.
Hallo,
Vielen Dank, Freund! :)
Ich habe lange nach demselben gesucht und jetzt habe ich es gefunden…
Danke, alles für den Trick.. Ich habe danach eine Weile gesucht..
SIE SIND EIN KÖNIG MAN
Ich würde DIESE SEITE jedem empfehlen, der nach einer Lösung für das absolute Zentrieren eines Bildes in einem DIV sucht.
WOOOOW!
Was passiert, wenn man unterschiedliche Bildgrößen hat, aber egal welche Bildgröße man möchte, alle zentriert sind. Normalerweise im jQuery-Galerie-Fall. Ich kämpfe seit zwei Tagen damit. Jede Hilfe wäre sehr willkommen.
Ähm, hm, nur JavaScript kann das wahrscheinlich tun, glaube ich, vielleicht? O.o
etwas wie
sollte ein Bild mit der ID „myimage“ zentrieren
bei einer absoluten Position von
und wenn man eine Reihe davon machen wollte, müsste man vielleicht ein Array erstellen und sie durchlaufen? O.o
noch jemand?
gut gemacht! TY!
Hallo
Darf ich wissen, wie Sie diese Website erstellt haben? Das Layout ist einfach fantastisch
???
Was ist mit einer reinen CSS-Lösung, um ein Bild vertikal in einem DIV zu zentrieren, das POSITION: FIXED ist
???
Vielen Dank!
Hallo, ich habe etwa 50 Beiträge auf meinem Blog veröffentlicht. Jetzt muss ich meine Blog-Vorlage mit einer neuen ändern. Ich habe auch das Bild hochgeladen.
Das Problem mit meiner neuen Vorlage ist, dass mein zuvor hochgeladenes Bild nicht an der gewünschten Position ist. Ich muss das Bild neu hochladen, damit es zu meiner neuen Vorlage passt. Kann mir jemand dabei helfen? Damit das zuvor hochgeladene Bild auf (300x300 Pixel) erzwungen wird. Vielen Dank im Voraus.
Was macht man, wenn die Größe des Bildes unbekannt ist?
Hier ist ein einfacher jQuery-Code, der die Bildgröße überprüft und es dann zentriert ... perfekt, wenn Sie die Größe des Bildes nicht kennen.
https://github.com/devasaur/vlign.js/blob/master/vlign.js
Guter Versuch, neue Leute für CSS zu begeistern. Weiter so!
ICH LIEBE DICH!! Ähm, vielen Dank. Ich habe versucht herauszufinden, wie man eine Grafik mit absoluter Positionierung auf einem zentrierten Body-Container platziert. Mir ist aufgefallen, dass Sie die Grafik durch „left: 50%“ zentriert haben und dann mit meiner Containerbreite, die ich durch 2 geteilt und die Maße angepasst habe, um eine perfekte Passform zu erzielen;). „left: 50%“ ist ein sehr wichtiges Element bei der Verwendung von absoluter Positionierung. Verdammt, wenn ich das nur vorher gewusst hätte, hätte ich mein Design und meinen CSS-Code nicht geändert :(. Na ja, man lebt und lernt :D
Nochmal danke und sehr geschätzt.
CHEERS :)
ah – einige sehr nützliche Tricks, die mir definitiv geholfen haben. Danke für das Teilen!
Ich möchte ein Bild im Hintergrund meiner Webseite (oben mittig). Unterschiedliche Bilder auf jeder Seite.
Darüber möchte ich einen 1000 Pixel breiten Div in der Mitte der Seite mit dem Inhalt haben.
Ich möchte, dass alles in der Mitte bleibt, wenn ich das Browserfenster ändere.
Wie?
Dies funktionierte für mich zur vertikalen Zentrierung. Ich kann keine halbe Höhe verwenden, da ich die Höhe nicht kenne. Also habe ich Prozent verwendet
Ich habe kürzlich diese hier gesehen
Das ist großartig für das Image-Tag.
Das funktioniert.. aber man muss eine Höhe im Container angeben. Das ist für mich schlecht, dann..
Meine Lösung funktioniert in ie8
img{display: block; margin: 0 auto;}
Danke, Matthew Buchanan! Das ist perfekt – schön und sauber und funktioniert für unterschiedliche Bildgrößen. Es funktioniert bei mir in Firefox, Chrome, Safari, Opera und IE 8 und 9.
Das ist neu für mich und unglaublich hilfreich. Ich frage mich, warum es funktioniert?
Das ist großartig!
Hallo Matthew, es hat bei mir funktioniert, um das Bild sowohl vertikal als auch horizontal innerhalb eines Containers zu zentrieren. Danke :)
Makellos! Danke Matthew!
Bravo Matthew
und danke.
Vielen Dank Matthew, es funktioniert bei mir!
Vielen Dank. Das funktionierte bei mir unter Edge, Chrome und Firefox.
Das ist meine Idee dazu
Danke für das Tutorial, ich versuche, einen Absatz unter dem zentrierten Bild zu platzieren, aber wenn ich das tue, bleibt der Absatz oben links im Browserfenster.
Gibt es einen Weg, das zu umgehen?
Basierend auf Chris' Tabellenansatz hat dies bei mir hervorragend funktioniert…
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
.content {
width: 600px;
height: 400px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
Und das HTML…
<table id=”wrapper”>
<tr>
<td>
<div class=”content”>Inhalt…</div>
</td>
</tr>
</table>
Toller Artikel! Ich liebe Ihre Seite, sie ist als Lesezeichen markiert : )
Ich benutze Ihre Methode der absoluten Zentrierung auf all meinen Websites.
/* Höhe auf 100% setzen */
#container ul li{
display:inline-block;
height:100%;
}
/* Dann vertikal so gut wie möglich ausrichten */
#container ul li img{
vertical-align:middle;
}
/* HINWEIS: Die Bilder haben auch keine feste Größe :) Dies funktioniert in Firefox, ich benutze es schon seit einiger Zeit, daher muss ich es cross-browser getestet haben, kann mich aber nicht mehr erinnern. Probieren Sie es aus! */
Besser und vollständig: Stil für eine erweiterbare Box mit Titel und einem Bild darin.
Die Position: relative und die Breite sind keine Verpflichtung.
div.frameStretch {color: #061f4e; font-family: “mafonte”, Times New Roman, Times, serif; font-weight: normal; line-height: 1.35; text-align: justify; margin-right: auto; margin-left: auto; padding: 4px 8px; position: relative; top: 32px; width: 832px; overflow: hidden; border-width: 24px;
-moz-border-image: url(yourimageborder.png) 24 stretch; -moz-border-radius: 24px;
-webkit-border-image: url(yourimageborder2.png) 24 stretch; -webkit-border-radius: 24px;
-o-border-image: url(.yourimageborder.png) 24 stretch; -o-border-radius: 24px;
-ms-border-image: url(yourimageborder.png) 24 stretch; -ms-border-radius: 24px;
border-image: url(yourimageborder.png) 24 fill stretch; border-radius: 24px;
box-pack: center; box-shadow: 0px 1px 3px #122c53; text-shadow: -1px -1px 1px #cccccc, 1px 1px 1px #ffffff;}
/* — Für den Titel in der Box — */
div.frameStretch h2 {font-size: 36px; font-weight: bold; line-height: 24px; margin: 0; padding: 0 0 12px;}
/* — Für ein Bild im Inneren, vertikal ausgerichtet, rechts in der Box —*/
div.frameStretch img {list-style-position: inside; display: block; margin-top: auto; margin-right: -10px; margin-bottom: auto; padding: 8px 0 8px 8px; position: relative; right: 0; width: 240px; height: 238px; float: right; vertical-align: middle; border-style: none;}
Das Hintergrundbild ist einfach eine brillante Kuss-Technik.
Ich wollte nur eine Zeile hinterlassen, um Ihnen für diesen und viele andere nützliche Beiträge vielen Dank zu sagen.
Hallo,
Es verwendet im Grunde, wie man Bilder zentriert, und es kann einen Server-Zeitstempel für den Anfang übernehmen. Das CSS kann auch leicht nach eigenen Wünschen modifiziert werden.
http://www.phphunt.com/111/how-to-center-images
Hallo Chris – oder irgendein Genie da draußen, gibt es eine „responsive“ Möglichkeit, dies zu tun? Wenn man also den Browser mit „img{max-width:100%;height:auto}“ verkleinert, damit die Bilder die Größe ändern, gibt es eine Möglichkeit, sie sowohl vertikal als auch horizontal in einem DIV zu zentrieren?
Danke!
wird das in IE 7, IE6 unterstützt?
Hallo.. Danke für das Tutorial. Ich beziehe mich schon lange auf css-tricks.com für alle möglichen Dinge, und als Entwickler ist Ihre Seite eine großartige Ressource und hilft, die Entwicklung einiger meiner Projekte zu beschleunigen. Also Daumen hoch! :)
danke!
Man kann auch die line-height-Methode verwenden; genau wie man eine einzelne Textzeile vertikal ausrichten würde.
Setzen Sie den Container des Bildes auf eine bestimmte Höhe und geben Sie ihm auch eine Zeilenhöhe mit demselben Wert wie die Höhe. Geben Sie dann dem Bild im Container display: inline-block oder einfach inline.
Wenn Sie das Bild auch zentrieren möchten, da es bereits als inline angezeigt wird, können Sie dem Container text-align: center geben, wodurch das Bild ebenfalls zentriert wird.
Blamo!
Vielen Dank, das hat funktioniert!
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
seeeeeehr schön
danke. ;)
Das hat mir sehr geholfen. Vielen Dank!
Ich benutze immer
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Ja, das Gleiche gilt für Sie. Ich finde, das ist sehr schön.
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Hardcore-Tabellen-Emulator :D ( Demo )
img.center {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:2px;
margin-bottom: 2px;
padding: 2px;
}
Das wird auch funktionieren
Das ist genial. Keine Probleme mit dem Container-Div. Danke.
Hier ist eine LESS-Version der Inline-Technik, die ich verwende. Bearbeiten Sie die erste Höhe/Breite und lassen Sie LESS den Rest erledigen!
Hier ist eine noch einfachere Mixin-Version, die ich nur zur vertikalen Zentrierung von Elementen verwendet habe.
Beginnen Sie mit einem Standardwert wie diesem. In meinem Fall habe ich ihn auf 120 Pixel gesetzt.
Dann können Sie die Höhe nach Bedarf anpassen.
.vertically-center(80px);
Ich habe es in einem meiner Projekte ausprobiert und festgestellt, dass Ihre CSS-Technik für Hintergrundbilder in Chrome nicht funktioniert, wenn ich den HTML5-Doctype verwende. Ich muss den HTML5-Doctype entfernen, damit es funktioniert.
Der HTML5-Doctype ist definitiv nicht das Problem. Da ist etwas anderes im Gange.
Best Practices Chris :)
Diese Lösung hängt vom UX ab, wie meine Beobachtung dies als Erfahrung für eine Seite im Aufbau darstellt. Und Ihre Technik ist dafür eine Best Practice.
Ein von mir berechneter Vorschlag: Die Bildgröße sollte 206 Pixel quadratisch sein, da dies auch responsiv funktioniert :)
Hier ist meine Technik für Textinhalt, aber nicht für lt ie8
Schauen Sie sich meine Demo an, http://jsbin.com/rexuk/2/
Guter Gedanke, Bruder :)
Ich habe festgestellt, dass dieser CSS-Code die Aufgabe erfüllt. Er funktioniert, wenn Sie die Abmessungen der Bildklasse durch Prozentsätze anstelle von Pixeln ersetzen. Er scheint die tatsächlichen Pixel selbst zu berechnen. Er ist ziemlich einfach.
.container {
text-align: center;
width: BELIEBIG.px;
height: BELIEBIG.px;
}
.image {
width: 80%;
height: 80%;
position: relative;
top: 10%
}
Es gibt ein kleines mathematisches Prinzip dahinter: Machen Sie einfach den oberen Prozentsatz zur Hälfte dessen, was Sie von der Höhe abziehen. In meinem Fall habe ich 20 % abgezogen, was bedeutet, dass die obere Position 10 % beträgt. Ich weiß nicht, ob es für jeden Wunsch richtig funktioniert, aber ich hatte seitdem keine Probleme mehr damit!
Schauen Sie sich diese animierte, skriptlose Galerie-Demo an, die diese Prinzipien auf Bilder unterschiedlicher Größe anwendet, ohne die Größe anzugeben.
Skriptlose CSS-only Galerie
Die besten Lösungen sind die einfachsten. Großartig. Danke.
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container{width:300px; border:1px solide #000; text-align:center; vertical-align:middle;}
.container:before{height:100%; display:inline-block; content:””; text-align:center; vertical-align:middle;}
Das funktioniert in allen Browsern.
.image-center {
text-align: center;
}
.image-center:before {
content:”;
width: 1px;
height: 100%;
}
.image-center:before,
.image-center img {
display: inline-block;
vertical-align: top;
margin-right: -5px;
}
Guter Beitrag.
CSS Hintergrundbild-Technik: Funktioniert für mich.
Ich entwerfe eine i-Karte für eine Bibliothek und muss ein Logo im Hintergrund der i-Karte platzieren.
Vielen, vielen Dank fürs Posten.
Ich habe ein Bild-Div rechts und ein Text-Div links, ich brauche den Text zu
Den Text in der Mitte des Bildbereichs ausrichten.
Versuchen Sie, mir zu helfen, wie ich das mache
Das ist ein wirklich großartiger Artikel über die horizontale und vertikale Ausrichtung von Bildern und Text in der Mitte.
Hier gebe ich ein kleines Beispiel für Bild und Text mittig in einem Div ausrichten
Ändern Sie einfach Breite und Höhe, entfernen Sie 'bottom' oder was auch immer, um es an einer Seite zu befestigen.
Aktualisieren Sie Ihre Antwort oder besorgen Sie sich einen Job bei McDonalds.
#element {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
top: 0;
right: 0;
width: 960px;
height: 450px;
}
*{padding:0; margin:0;}
html{ height: 100vh; width:100%; display:table;}
body{ height: 100vh; width:100%; display: table-cell; vertical-align: middle; text-align: center; font-family: ‘Roboto Condensed’, sans-serif; font-weight: 400; font-size: 20px;}
Text
Wenn Sie die Abmessungen des Bildes nicht kennen, ist die folgende CSS-Anweisung möglicherweise eine bessere Lösung
Oder wenn Sie es nur horizontal zentrieren müssen
Beste Lösung aller Zeiten.
Hallo!
Wie wäre es mit transform???
Danke! Der Trick zur Bildausrichtung hat für mich funktioniert :) Ich bin so glücklich!
mit javascript
ups, entschuldige, die 600 und 800 sollten durch die Breite und Höhe deines Divs ersetzt werden
und hier
Ich meinte //ersetze body durch das Eltern-Div