mehrere divs nebeneinander zentriert

[kammerjaeger]

Hallo zusammen

Ich versuche mehrere Divs nebeneinander zentriert auszurichten. Im Netz finden sich diverse Möglichkeiten dazu, welche ich natürlich auch umzusetzen versucht habe - leider erfolglos. Ich vermute, da ist irgendwo noch ein Fehler (man liest immer wieder, dass das übergeordnete Div nicht 100% breit sein darf, aber das habe ich ja so umgesetzt. Ursprünglich hatte ich "width:100%-1px" angegeben, bin mir aber nicht sicher, ob das erlaubt ist. Funktionieren tut es...) drin und hoffe auf eure Hilfe.

Unten ein Auszug aus dem Code, einen Link mit Komplettansicht der Seite gibt es hier:
Seitenvorschau

  
.framediv	{  
		height:200px;  
		width:300px;  
		border:1px solid black;  
		padding:0 auto;  
		margin:15px;  
		float:left;  
		}  
  
  
.textdiv	{  
		text-align:center;  
		min-height:300px;  
		width:95%;  
		border:1px solid black;  
		padding:10px;  
		overflow:auto;  
		margin:0 auto;  
		}  

  
<div class="textdiv">  
	<div class="framediv">  
	</div>  
	<div class="framediv">  
	</div>  
	<div class="framediv">  
	</div>  
	<div class="framediv">  
	</div>  
</div>  

Vielen Dank für eine allfällige Hilfe :-)

[Felix Riesterer]

Lieber kammerjaeger,

mehrere Divs nebeneinander zentriert auszurichten.

die <div>-Elemente bräuchten die display-Eigenschaft "inline-block", damit sie sich wie Buchstaben in einem Fließtext verhalten und je nach verfügbarem Platz nebeneinander anordnen. Wenn dieser "Fließtext" (also das Elternelement), in welchem die Elemente stehen, mit text-align: center eingestellt ist, richten sie sich auch mittig aus. Das Prinzip mit dem Floating kann das aufgrund seines anderen Visualisierungskonzeptes nicht leisten, daher ist Dein Ansatz mit float: left, was das Zentrieren angeht, zum Scheitern verurteilt. Mit vertical-align kann man dann anschließend steuern, wie die unterschiedlichen Höhen angeordnet werden ("stehend", "hängend" oder zentriert).

Damit alle nebeneinander passen, muss logischerweise die gesamte Breite aller <div>-Elemente in das Elternelement (in Deinem Falle wohl auch ein <div>-Element) passen. Daher muss von jedem dieser <div>-Elemente die Werte für "width", "margin", "padding" und "border-width" zusammenaddiert werden, um die endgültige Breite zu erhalten. Wenn diese dann kleiner oder gleich der Breite des Eltern-Elements ist, dann stehen sie nebeneinander.

Liebe Grüße,

Felix Riesterer.