✔ div Elemente zentrieren mit float:left

A

anve

Mitglied
Ich will eine Reihe von divs innerhalb einer div zentrieren. D.h. alle div Elemente sollten so ausgerichtet werden, dass sie (je nach dem wieviel Platz sie benötigen bzw. padding-Abstand) immer mittig ausgerichtet sind und zwar alle div Elemente.

text-align:left und margin:0 auto funktionieren nicht. Das liegt warscheinlich am float:left. Dieses benötige ich aber, da ansonsten die div-Elemente einen Zeilenumbruch einfügen und mit display:inline kann ich keine Positionierungsangaben wie padding-top:10px machen.

CSS: 
body {padding: 0; margin: 0; text-align:center; }
.text {float:left; padding:7px 10px 0 0}
.date {float:left; padding:0 10px}

HTML: 
<body>
<div id="content">
	<div class="text">text1</div>
	<div class="date">text2</div>
</div>
</body>

Ist table die einzige Möglichkeit?

OK ich habs so gelöst
CSS: 
#content {padding:10px 0 0 350px}
 
Zuletzt bearbeitet:
Danke hela!

HTML: 
<div id="oberstesElement">
	<div class="centerdiv">
		<div class="unterDiv1">
		</div>
		<div class="unterDiv2">
		</div>
	</div>
</div>

CSS: 
#oberstesElement {
	width:100%;
}

.centerdiv {
	float:left;
	left:50%;
	position: relative;
}

.centerdiv div {
	float:left;
	right:50%;
	position: relative;
}
 
Ich bin gerade draufgekommen, dass dadurch die Seite breiter wird und einen unerwünschten Abstand rechts erzeugt. Was kann ich dagegen tun?

Zwar nicht ganz perfekt, aber folgende Lösung habe ich angewandt:
CSS: 
.centerdiv {
	width:915px;
	margin:0 auto;
}

Zentrierung erfolgt jedoch nicht ganz.
 
Zuletzt bearbeitet:
anve hat gesagt.:
Ich bin gerade draufgekommen, dass dadurch die Seite breiter wird und einen unerwünschten Abstand rechts erzeugt...
Zum Vergrößern anklicken....
Hallo,

tut mir leid, dass ich erst jetzt auf deinen Beitrag reagiere. Dass die Seite u.U. breiter wird ist normal, da das "centerdiv" ja verschoben wird. Damit sollte das aber keine Rolle mehr spielen, vermutlich hast du die overflow-Eigenschaft nicht dabei:

CSS: 
#oberstesElement {
  width:100%;
  overflow: hidden;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück