Inhalt von DIV Vertikal mittig ausrichten

[_R_A_L_F_]

Hallo,

ich versteh nicht warum die vertikale Ausrichtung des Inhalt von einem DIV nicht klappt?

Code

.summe {
    height: 50px;
    width: 100px;
    margin-left:auto;
    margin-right:auto;
    background-color:#3300FF;
}
.teil1 {
    height: 50px;
    width: 30px;
    margin-left:10px;
    margin-right:10px;
    float:left;
    background-color:#CC9900;
    text-align:center;
}
.teil2 {
    height: 50px;
    width: 30px;
    margin-left:10px;
    margin-right:10px;
    float:left;
    text-align:center;
    background-color:#669999;
}






<div class="summe">
<div class="teil1">
div1
</div>
<div class="teil2">
div2
</div>
</div>

Habe das ganze mal probiert so wie ich es bei google gefunden habe mit:
display:table-cell; vertical-align:middle

aber das brachte nicht den gewünchten Erfolg.

Kann mir wer helfen?

Danke schon mal

 

[djheke]

So funktioniert's Du darfst kein FLOAT benutzen.

.summe {
  height: 50px;
  width: 100px;
  margin-left:auto;
  margin-right:auto;
  background-color:#3300FF;
display:table;
}
.teil1 {
  height: 50px;
  width: 30px;
  margin-left:10px;
  margin-right:10px;
  background-color:#CC9900;
  text-align:center;
display:table-cell;
vertical-align:middle;
}
.teil2 {
  height: 50px;
  width: 30px;
  margin-left:10px;
  margin-right:10px;
  text-align:center;
  background-color:#669999;
display:table-cell;
vertical-align:middle;
}

 

[_R_A_L_F_]

Hallo djheke,

vielen Dank für den Tipp. Funktioniert einwandfrei aber warum ist das float verboten? Nur aus Neugier :)

 

[djheke]

Verboten nicht, aber mit floats setzt du die display:table Eigenschaften außer Kraft.

 

[_R_A_L_F_]

Ok, Danke für die Info ;)