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

mehrere Divs zentrieren

Wiesl

Neues Mitglied
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
 
Werbung:
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>
 
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>
 
Werbung:
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.
 
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);}
 
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.
 
Werbung:
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:
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!
 
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%;
 
Werbung:
Zurück
Oben