CSS Divs in flexiblem Div zentrieren

excessived · #1 (**permalink**) 11.03.2014, 19:15

Hallo zusammen,

ich habe folgendes Problem:
Ich habe eine Div-Box, welche in ihrer Breite flexibel, sowie mittig ausgerichtet ist:

Code:

.divmiddle {
  margin: 0 auto;
  width: 70%;
  height: 70%;

in diesem Div sollen nun Divs in der Größe 300x300 Px eingebunden werden, welche zentriert nebeneinander stehen sollen. Wird das Browserfenster zugezogen, sollen die Divs automatisch umbrechen:

Code:

.div1 {
  margin: 0 auto;
  float: left;
  padding: 10px;
  width: 300px;
  height: 300px;
}

.div2 {
  margin: 0 auto;
  float: left;
  padding: 10px;
  width: 300px;
  height: 300px;
}

.div3 {
  margin: 0 auto;
  float: left;
  padding: 10px;
  width: 300px;
  height: 300px;
}

Derzeit stehen die Divs in dem Eltern-Div und brechen auch um. Allerdings sind sie linksbündig - ich hätte die Gruppe aus den Divs gerne zentriert
Also wenn das Fenster zugezogen wird, springt z.B Bild 3 in die zweite Zeile unter Bild 1. Dann ist rechts ein großer freier Raum ( dort wo Bild 3 nicht mehr ganz hin passt).
Hier hätte ich es nun gerne so, das die Divs so hinrutschen, das sie in der Mitte des Wrappers stehen
Wenn das Fenster z.B soweit zugezogen wird, das alle Bilder untereinander stehen ist rechts sehr viel Platz - die frei Bilder untereinander sollen dann zentriert im Wrapper stehen

- ist das überhaupt möglich ?

Hier mal mein Beispiel: http://jsfiddle.net/ryU8b/1/

Danke für eure Hilfe !

explanator · #2 (**permalink**) 12.03.2014, 00:50

Beispiel:

HTML-Code:

<!DOCTYPE HTML>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Justify - Blocksatz</title>
    <style type="text/css">
    main {
        text-align: justify;
        width: 90%;
        height: 70%;
        margin: 0 auto;
    }
    main:after {
        content: "";
        display: inline-block;
        padding-left: 100%;
        visibility: hidden;
    }
    section.square {
        padding: 10px;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        display: inline-block;
    }
    </style>
</head>

<body>
    <main>
        <section class="square">
            <p>section 1</p>
        </section>
        <section class="square">
            <p>section 2</p>
        </section>
        <section class="square">
            <p>section 3</p>
        </section>
        <section class="square">
            <p>section 4</p>
        </section>
        <section class="square">
            <p>section 5</p>
        </section>
        <section class="square">
            <p>section 6</p>
        </section>
    </section>
</body>

</html>

excessived · #3 (**permalink**) 12.03.2014, 01:01

habe etwas gefunden was das darstellt was ich vor hatte
habe es jetzt so gelöst: Beispiel 8

(siehe Seitenquelltext)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS - CMS - lange Menus Balken/BG oben?	shinobi	CSS	3	13.10.2011 22:12
Css Div Boxen relativ untereinander ausrichten	heinbloed	CSS	1	24.01.2011 00:06
div mit css über andere elemente platzieren	ping	CSS	6	20.08.2009 14:54
ul in div zentrieren	MrMister	CSS	8	05.07.2009 23:52
nur bestimmte divs mit css formatieren	tricky	CSS	2	05.03.2004 11:19