XHTMLforum - CSS Divs in flexiblem Div zentrieren

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS Divs in flexiblem Div zentrieren (http://xhtmlforum.de/showthread.php?t=70742)

CSS Divs in flexiblem Div zentrieren

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 ! ;)

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>

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

(siehe Seitenquelltext)