freezly: div innerhalb div zentrieren

Beitrag lesen

SELF-Forum

div innerhalb div zentrieren

freezly
– Informationen zu den Bewertungsregeln

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.

Beitrag melden
–
Informationen zu den Bewertungsregeln