mehrere Divs zentrieren

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wiesl

Neues Mitglied
7 März 2014
8
0
1
#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:
<div style="float:left">
<p> TEST1</p>
</div>
<div style="float:left">
<p> TEST2</p>
</div>
<div style="float:left">
<p> TEST3</p>
</div>
Und diese 3 DIVs sollten einfach mittig zentriert sein!
Ist das wirklich so schwer.....

Verzweifelnde Grüße
Wiesl
 

scbawik

Senior HTML'ler
14 Juli 2011
2.442
423
83
#2
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:
<div style="float:left">
<p> TEST1</p>
</div>
<div style="float:left">
<p> TEST2</p>
</div>
<div style="float:left">
<p> TEST3</p>
</div>
Und diese 3 DIVs sollten einfach mittig zentriert sein!
Ist das wirklich so schwer.....

Verzweifelnde Grüße
Wiesl
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:
<div style="display:inline-block;"></div>
<div style="display:inline-block;"></div>
Das:
HTML:
<div style="display:inline-block;"></div><div style="display:inline-block;"></div>
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.012
408
83
Berlin
#3
Geht mit CSS3 ganz einfach:
HTML:
.container {
  float: left;
  width: 300px;
  height: 150px;
  margin: 0 10px;
  background: red;
}
.gap {
  margin-left: calc( (100% - 3 * 320px) / 2);
}

<div class="container gap"></div>
<div class="container"></div>
<div class="container"></div>
 

scbawik

Senior HTML'ler
14 Juli 2011
2.442
423
83
#4
Geht mit CSS3 ganz einfach:
HTML:
.container {
  float: left;
  width: 300px;
  height: 150px;
  margin: 0 10px;
  background: red;
}
.gap {
  margin-left: calc( (100% - 3 * 320px) / 2);
}

<div class="container gap"></div>
<div class="container"></div>
<div class="container"></div>
Das ist ja auch auf eine fixe Größe beschränkt, wenn ich mich jetzt nicht irre.
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.012
408
83
Berlin
#5
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);}
 

scbawik

Senior HTML'ler
14 Juli 2011
2.442
423
83
#6
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);}
HTML:
<div>Dieses Div ist um einiges breiter als</div>
<div>das</div>
<div>und das</div>
Dachte eher an so einen Fall. Aber ist ja egal, jetzt wird @Wiesl schon eine Lösung finden.
 

djheke

Aktives Mitglied
8 Februar 2012
915
82
28
#7
So?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal zentrierte Boxen bei unbekanner Größe</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

.aussen {
text-align:center;
}

.aussen div {
display:inline-block;
background:#333;
color:#fff;
margin:1px;
padding:10px;
height:200px; /* beispielhoehe*/

}


</style>


</head>
<body>
  <div class="aussen">
  <div>erste box</div
  ><div>zweite box mit text</div
  ><div>dritte box mit noch mehr text</div>
  </div>
  <div class="aussen">
  <div>erste box zewite reihe</div
  ><div>zweite box mit text zewite reihe</div
  ><div>dritte box mit noch mehr text zewite reihe</div>
  </div>


</body>
</html>
http://www.gipspferd.de/forumhilfe/div-boxen-zentrieren/
 
Zuletzt bearbeitet:

Wiesl

Neues Mitglied
7 März 2014
8
0
1
#8
So?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal zentrierte Boxen bei unbekanner Größe</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

.aussen {
text-align:center;
}

.aussen div {
display:inline-block;
background:#333;
color:#fff;
margin:1px;
padding:10px;
height:200px; /* beispielhoehe*/

}


</style>


</head>
<body>
  <div class="aussen">
  <div>erste box</div
  ><div>zweite box mit text</div
  ><div>dritte box mit noch mehr text</div>
  </div>
  <div class="aussen">
  <div>erste box zewite reihe</div
  ><div>zweite box mit text zewite reihe</div
  ><div>dritte box mit noch mehr text zewite reihe</div>
  </div>


</body>
</html>
http://www.gipspferd.de/forumhilfe/div-boxen-zentrieren/

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!
 

Codingcat

Neues Mitglied
13 Februar 2018
1
0
1
16
#9
Hey, ich hab selber jetzt auch eine Lösung gefunden. Vielleicht kommt damit jemand zurecht! :D

Code:
Äußeres Div:
float: left;
width: 100%;
text-align: center;

innere divs (classe):
display:inline-block;
    margin: 0 9%;