Gefloatete Divs zentrieren

[Sempervivum]

Hallo,
ich habe hier ein Layout mit gefloateten Divs:
http://ulrichbangert.de/div/webdesign/html/mitgliederliste2.html
Leider schaffe ich es nicht, die Divs zu zentrieren. Wie man sieht, reagieren sie nicht auf text-align:center, wahrscheinlich, weil das der float-Regel widerspricht. Außerdem habe ich versucht, einen Span mit display:inline-block und margin:auto drum herum zu legen, aber das hat auch nicht funktioniert: Die Breite passte sich nicht an den Inhalt an sondern nahm den ganzen Viewport ein. Einen div-Container mit fester Breite drum herum zu legen, geht nicht, weil das Ganze responsiv bleiben soll, d. h. die Anzahl der Elemente pro Zeile soll sich entspr. der Breite des Viewport automatisch einstellen.
Kann mir da jemand weiterhelfen? CSS gehört leider nicht zu meinen Stärken.
Viele Grüße - Ulrich

 

[B3nnoX]

Also ich weiß nun nicht ob ich das so richtig verstehe, du willst den kompletten Content zentrieren. Dann musst du bei deiner Beispielseite noch ein Div um alle Elemente machen

<div class="" style="margin: 0 auto; width: 70%;">
<div class"wrapper">...</div>
<div class"wrapper">...</div>
<div class"wrapper">...</div>
...
</div>

Ich würde ansonsten zu Bootstrap raten, das ist perfekt gemacht für das was du vor hast. Hier der Link
Man muss sich zwar kurz einarbeiten bzgl. des grid systems aber danach geht es sehr schnell :)

 

[MrMurphy]

Hallo

Einen div-Container mit fester Breite drum herum zu legen, geht nicht, weil das Ganze responsiv bleiben soll, d. h. die Anzahl der Elemente pro Zeile soll sich entspr. der Breite des Viewport automatisch einstellen.

Das sollte bei HTML5 das Flexbox-Modell lösen:

      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      .wrapper {
         margin: 2%;
      }

Das vorhandene CSS musst du natürlich löschen.

Gruss

MrMurphy

 

[threadi]

Eine weitere Alternative wäre die Eigenschaft "display: inline-block;" die Du den Blockelementen geben könntest. Dann sollte auch das text-align wirken.

 

[Sempervivum]

Hallo und danke für die zahlreichen Antworten.
@B3nnoX: Das funktioniert leider nicht, denn die Zentrierung wirkt nur nach außen, aber innerhalb des div ändert sich nichts.
@threadi: So einfach kann das sein! Funktioniert einwandfrei! Danke für diesen Hinweis.
@MrMurphy: Mit Flexbox stehe ich ein wenig auf Kriegsfuß, denn ich bin mal daran gescheitert, ein responsives Design damit zu realisieren. Ich habe es dennoch ebenfalls ausprobiert und es funktioniert einwandfrei. Danke für diesen Hinweis! Leider unterstützt mein Editor Flexbox nicht in Bezug auf das Fehler-Highlighting, so dass es schwierig ist, etwas neues zu entwickeln.