nicht angemeldet
div innerhalb div zentrieren
Hallo,
ich möchte 3 Texte auf einer Seite horizontal gleichmäßig verteilen. Nun habe ich mir gedacht, ich mache 3 divs, welche nebeneinander gleich groß in voller Breite (bei mir 980px) mit einem Abstand von 10px dargestellt werden. Klappte soweit hervorragend. (im folgenden "Container" genannt)
Nun soll der Text, der linksbündig formatiert sein muss in der Mitte jedes dieser Container liegen. Also habe ich in jedes dieser Container je ein weiteres div gelegt, welches den Text sauber umschliesst mit einem Padding von ein paar Pixel. Die größe (width) passt genau, nur ist dieses DIV immer Linksbündig. Es wandert nie in die Mitte.
Hier mein Code:
HTML:
<body>
<div style="display: block;">Klassenauswahl:</div>
<div class="SchulSeiteBodyKlassenContainerLeft">
<div class="SchulSeiteBodyKlassenData"><label>5a</label>
<br><label>Maschinenbauer 1 2007</label>
</div>
</div>
<div class="SchulSeiteBodyKlassenContainerCenter">
<div class="SchulSeiteBodyKlassenData"><label>5b</label>
<br><label>Maschinenbauer 1 2007</label>
</div>
</div>
<div class="SchulSeiteBodyKlassenContainerRight">
<div class="SchulSeiteBodyKlassenData"><label>5c</label>
<br><label>Maschinenbauer 1 2007</label>
</div>
</div>
</body>
CSS:
div.SchulSeiteBodyKlassenData{
border-style: solid;
border-width: 1px;
margin: auto;
text-align: left;
width:auto;
float:left;
}
div.SchulSeiteBodyKlassenContainerLeft{
border-style: solid;
border-width: 1px;
width: 320px;
float:left;
text-align:center;
}
div.SchulSeiteBodyKlassenContainerCenter{
border-style: solid;
border-width: 1px;
width: 320px;
float: left;
margin-left: 10px;
}
div.SchulSeiteBodyKlassenContainerRight{
border-style: solid;
border-width: 1px;
width: 320px;
float: left;
margin-left: 10px;
}
Ich habe im DATA Div schon mit margin:auto gearbeitet. Aber es klappt einfach nicht.
-
Hi,
Die größe (width) passt genau, nur ist dieses DIV immer Linksbündig. Es wandert nie in die Mitte.
Natuerlich nicht, schliesslich hast du es ja nach links floaten lassen.
MfG ChrisB
-
Hi,
Die größe (width) passt genau, nur ist dieses DIV immer Linksbündig. Es wandert nie in die Mitte.
Natuerlich nicht, schliesslich hast du es ja nach links floaten lassen.
MfG ChrisB
OK, hört sich ja irgendwie logisch an :) Ich habe deswegen das float:left gemacht, weil sonst das DIV die komplette Breite einnimmt und nicht, wie ich es gern hätte, sich schön um den Text schmiegt. Wie löse ich dieses Problemchen?
Ich kann gern auch auf das float:left verzichten, wenn es eine andere Lösung für die Größenanpassung gibt.
-
Hi,
Ich habe deswegen das float:left gemacht, weil sonst das DIV die komplette Breite einnimmt
Ja, das tun Block-Elemente (sofern man ihnen nicht explizit eine Breite zuweist).
und nicht, wie ich es gern hätte, sich schön um den Text schmiegt. Wie löse ich dieses Problemchen?
Wenn du kein Block-Verhalten willst, lasse es nicht als block darstellen.
MfG ChrisB
-
-