#1 24. Januar 2014 Zuletzt von einem Moderator bearbeitet: 14. April 2017 Hallo liebe RR'ler, ich sitze momentan an einem Projekt von der Uni. Im Projekt geht es darum eine mobile Website zu bauen und diese mit Animationen von Adobe Edge zu gestalten. Der Hintergrund dabei ist, dass wir diese über einen QR-Code aufrufen und wir davon ausgehen sollen, dass wir genau wissen wo der Kunde sich befindet wenn er das tut. Also ein fester Ort. So viel zur Aufgabe. Mein Problem: Ich habe eine Website die sich immer an die Displaygröße anpassen soll, egal ob landscape modus oder nicht. Die div's sind dabei immer so groß wie der Browser, bzw der viewport. Ich hab das Sichtfeld in zwei divs geteilt und möchte Elemente dieser Divs vertikal zentrieren. Diese Elemente zu zentrieren schaffe ich nicht. Und finde keine Lösung. Hier eine kleine Skizze. Und hier mein bisheriger Code: html Code: <body> <div id="one"> <div id="oneleftside"> <div id="outer"> <img src="leeres-glas.png" width="300" height="636" class="ri"></div> </div> <div id="onerightside"> <div class="textbox"> <div class="pad5"><h1 class="becksred">Ärgerlich!</h1></div> <div class="pad10"><h3 class="becksgrey">Da ist das Bier schon alle.</h3></div> </div> </div> </div> css Code: @charset "utf-8"; body, html { height: 100%; margin:0; } .becksgrey { color:#383536; } .becksred { color:#ed3237; } .beckswhite { color:white; } h1 { font-size: 8vw; } h2 { font-size: 3.0vh; } h3 { font-size: 4vmax; } .pad10 { margin-left:10%; margin-right:10%; } .pad5 { margin-left:5%; margin-right:5%; } .textbox { margin-bot:auto; margin-top:atuo; font-family:Arial, Helvetica, sans-serif; } #one { height: 100%; background-color:white; } #oneleftside { float:left; height:100%; width:50%; display:inline-block; } #oneleftside img { vertical-align:middle; float:right; height:auto; max-width:30vw; } #onerightside { float:right; height:100%; width:50%; } Dazu sei gesagt, dass alle Elemente responsive sein sollen - wenn möglich. Ich hoffe hier kann mir jemand behilflich sein. Im Internet konnte ich keine Lösung finden, habe Ansätze aber keiner führte zum Ergebnis. lg Snarkoon + Multi-Zitat Zitieren
#2 24. Januar 2014 AW: Mobile Website - inhalte vertikal zentrieren da ist ein fehler: margin-bot:auto; margin-top:atuo; heißt das normal nicht margin-bottom? versuch mal margin: 0px auto; oder umgekehrt dabei beachten das das element display:block; und die width fix angegeben ist. #textbox {margin: 0px auto; width:200px; display:block;} + Multi-Zitat Zitieren
#3 24. Januar 2014 AW: Mobile Website - inhalte vertikal zentrieren Using CSS flexible boxes - Web developer guide | MDN + Multi-Zitat Zitieren
#4 24. Januar 2014 AW: Mobile Website - inhalte vertikal zentrieren Hey raid, danke für deine Hilfe. Den Fehler hab ich behoben. Nur leider bringt dein Ansatz ebenfalls keinen Erfolg. Das Element wird nicht zentriert. lg + Multi-Zitat Zitieren
#5 24. Januar 2014 AW: Mobile Website - inhalte vertikal zentrieren Sry, bin nicht mehr ganz nüchtern, aber sind display:inline-block; und float:wherever; nicht zusammen überflüssig? Mach mal nur display: inline-block; mit vertical-align:middle; und lasse die floats weg. Packe beide (also "left" und "right" mit inline-block) in einen DIV (zB wrapper), der eine gewisse höhe hat. Positioniere die divs "right" und "left" mit margin und padding in % innerhalb vom wrapper. Das sollte doch klappen. Gruß gl + Multi-Zitat Zitieren