float, max-width und margin-auto (zentrieren von Objekt mit max-width)

jeipack

Erfahrenes Mitglied
Hi
Ich bin heute nicht so auf der Höhe und hoffe mir kann schnell wer auf die Sprünge helfen.
Also ich habe ein container-Div mit einer fixen Breite und margin-left und -right: auto -> So dass das Div zentriert ist.
Darin habe ich divs die mit float:left gefloated werden.
Nun habe ich dem container-Div ein max-width: 100% gegeben um es responsive zu machen.
Mein Problem nun ist, dass bei kleinem Bildschirm ja max-width greifft und die gefloateten Divs darin alle links kleben, und somit die Divs selbst nicht zentriert sind. Die Frage ist, wie kann ich diese trotzdem zentrieren?

Damit es ein bisschen klarer wird hier ein Fiddle (Einfach denn Trenner grösser und kleiner machen um zu sehen was ich meine)
http://jsfiddle.net/ry3h5dpa/1/

Alle kleben links wegen float:left. Ich hätte sie aber gerne zentriert:
upload_2015-6-19_15-49-2.png

Auch wenns gross ist, ist nur der container zentriert, aber die Elemente darin kleben links:
upload_2015-6-19_15-51-9.png
 
Hmm ja aber was ist wenn zwei Elemente rein passen
upload_2015-6-19_16-25-33.png

Hatte gehofft etwas allgemein gültigeres zu finden.
 
Naja, da werden schon einzelne Breakpoints benötigt, um anhand von ihnen zu definieren, wie sich die Elemente verhalten sollen.
 
Hmm ich muss mich mal durch die zwei Links da durcharbeiten, sieht so aus als wäre da die Lösung drin
http://stackoverflow.com/a/3317802/2481955

edit, resp. hier: http://jsfiddle.net/danield770/9DBCv/3/
Wenn die umfließenden Blöcke grundsätzlich zentriert sein sollen, und nicht ausschließlich bei kleinen Auflösungen, hast du dein Anliegen leider falsch beschrieben ;)
Mein Problem nun ist, dass bei kleinem Bildschirm ja max-width greifft und die gefloateten Divs darin alle links kleben, und somit die Divs selbst nicht zentriert sind. Die Frage ist, wie kann ich diese trotzdem zentrieren?
 
Ich würde dann die inneren Container nicht mit float:left anordnen sondern ihnen ein display:inline-block geben und dem umgebenden Container ein text-align:center. Auf diese Weise ist es ganz einfach.
 

Neue Beiträge

Zurück