1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

mehrere Divs zentrieren

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von Wiesl, 20 März 2014.

  1. Wiesl

    Wiesl Neues Mitglied

    Registriert seit:
    7 März 2014
    Beiträge:
    8
    Punkte für Erfolge:
    1
    Hallo Leute!

    Ich krieg jetzt hier gleich einen Vogel, weil ich immer an Problemen hänge, die zuerst trivial aussehen, mich aber dann die letzten Nerven kosten....

    Folgendes Problem:

    Ich möchte x Divs nebeneinander floaten (also alle float: left) und diese dann zentriert auf meiner Content-Seite angezeigt bekommen.

    Das kann doch nicht so schwierig sein, oder?

    Also nehmen wir an ich habe 3 Divs mit unbekannter Breite, welche in einer fluid-breiten Content-Seite eingebettet sind.
    Diese sollten jetzt einfach nebeneinander und zentriert angezeigt werden.

    Was ich bisher versucht habe:
    * umlagerndes Div --> Problem: ich muss dem Div eine Größe geben, um mit margin: 0 auto; arbeiten zu können (die Größe der Divs ändert sich aber immer wieder)
    *display: inline-block; und text-align: center;--> Problem: Die einzelnen divs sind nicht mehr vertikal auf einer Linie.

    Also:
    Code (text):
    1.  
    2. <div style="float:left">
    3. <p> TEST1</p>
    4. </div>
    5. <div style="float:left">
    6. <p> TEST2</p>
    7. </div>
    8. <div style="float:left">
    9. <p> TEST3</p>
    10. </div>
    11.  
    Und diese 3 DIVs sollten einfach mittig zentriert sein!
    Ist das wirklich so schwer.....

    Verzweifelnde Grüße
    Wiesl
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.380
    Punkte für Erfolge:
    83
    Da du ja keinen Wrapper benutzen kannst aufgrund der dynamischen Breite würde sich statt float "display:inline-block" eignen. Dann kannst du diese per text-align ausrichten. Damit sich dann kein Abstand zwischen den DIVs bildet, musst du die Leerzeichen zwischen den DIVs löschen. Statt dem:
    HTML:
    1. <div style="display:inline-block;"></div>
    2. <div style="display:inline-block;"></div>
    Das:
    HTML:
    1. <div style="display:inline-block;"></div><div style="display:inline-block;"></div>
     
  3. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.936
    Punkte für Erfolge:
    83
    Geht mit CSS3 ganz einfach:
    HTML:
    1. .container {
    2.   float: left;
    3.   width: 300px;
    4.   height: 150px;
    5.   margin: 0 10px;
    6.   background: red;
    7. }
    8. .gap {
    9.   margin-left: calc( (100% - 3 * 320px) / 2);
    10. }
    11.  
    12. <div class="container gap"></div>
    13. <div class="container"></div>
    14. <div class="container"></div>
     
  4. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.380
    Punkte für Erfolge:
    83
    Das ist ja auch auf eine fixe Größe beschränkt, wenn ich mich jetzt nicht irre.
     
  5. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.936
    Punkte für Erfolge:
    83
    Fixe Größe schon, allerdings ohne umgebenden Container.

    Eine width wird doch so oder so gebraucht, wenn man Elemente floaten will. Man könnte es aber auch anders definieren:
    .container {width: 33%; max-width: 300px}
    .gap {margin-left: calc((100 % 3) / 2);}
     
  6. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.380
    Punkte für Erfolge:
    83
    HTML:
    1. <div>Dieses Div ist um einiges breiter als</div>
    2. <div>das</div>
    3. <div>und das</div>
    Dachte eher an so einen Fall. Aber ist ja egal, jetzt wird @Wiesl schon eine Lösung finden.
     
  7. djheke

    djheke Aktives Mitglied

    Registriert seit:
    8 Februar 2012
    Beiträge:
    899
    Punkte für Erfolge:
    28
    So?
    Code (text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta charset="utf-8">
    6. <title>Horizontal zentrierte Boxen bei unbekanner Größe</title>
    7. <style type="text/css">
    8. * {
    9. margin:0;
    10. padding:0;
    11. }
    12.  
    13. .aussen {
    14. text-align:center;
    15. }
    16.  
    17. .aussen div {
    18. display:inline-block;
    19. background:#333;
    20. color:#fff;
    21. margin:1px;
    22. padding:10px;
    23. height:200px; /* beispielhoehe*/
    24.  
    25. }
    26.  
    27.  
    28. </style>
    29.  
    30.  
    31. </head>
    32. <body>
    33.   <div class="aussen">
    34.   <div>erste box</div
    35.   ><div>zweite box mit text</div
    36.   ><div>dritte box mit noch mehr text</div>
    37.   </div>
    38.   <div class="aussen">
    39.   <div>erste box zewite reihe</div
    40.   ><div>zweite box mit text zewite reihe</div
    41.   ><div>dritte box mit noch mehr text zewite reihe</div>
    42.   </div>
    43.  
    44.  
    45. </body>
    46. </html>
    47.  
    http://www.gipspferd.de/forumhilfe/div-boxen-zentrieren/
     
    Zuletzt bearbeitet: 20 März 2014
  8. Wiesl

    Wiesl Neues Mitglied

    Registriert seit:
    7 März 2014
    Beiträge:
    8
    Punkte für Erfolge:
    1

    Danke, das funktioniert schon sehr gut, ein kleines Problem habe ich aber noch:
    Da ich in meinen versch. Divs mehrere <p> - Absätze habe, verschieben sich die folgenden Divs jeweils um eine Zeile nach unten.
    Wie könnte ich das beheben?

    An Alle vielen Dank für eure Hilfe

    Wiesl

    P.S.: GELÖST, mit vertical-align: top; siehts perfekt aus, danke an Alle!
     
  9. Codingcat

    Codingcat Neues Mitglied

    Registriert seit:
    13 Februar 2018
    Beiträge:
    1
    Punkte für Erfolge:
    1
    Hey, ich hab selber jetzt auch eine Lösung gefunden. Vielleicht kommt damit jemand zurecht! :D

    Code (text):
    1. Äußeres Div:
    2. float: left;
    3. width: 100%;
    4. text-align: center;
    5.  
    6. innere divs (classe):
    7. display:inline-block;
    8.     margin: 0 9%;
     
  10. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    232
    Punkte für Erfolge:
    28
    Nach 3 Jahren ? RESPEKT !!