Vertically Mitte align schwebte Inhalt

Question

Ich verfolge diese SO Answer vertikal ein div Inhalt ausrichten, dass float: left Styling hat:

.main { 
 
    height: 85px; 
 
} 
 

 
.child_1, 
 
.child_2 { 
 
    float: left; 
 
    width: 8rem; 
 
}

<div class="main"> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_1"> 
 
     Some long text is put here 
 
    </div> 
 
    </div> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_2"> 
 
     22 
 
    </div> 
 
    </div> 
 
</div>

Aber ist es nicht vertikal ausrichten gemäß der Höhe der Verpackung div Haupt. Was ist falsch im Code?

Answer 1

Wenn Sie

display: flex; 
align-items: center; 

zu .main Klasse hinzufügen, sollte es funktionieren.

.main { 
 
    height: 85px; 
 
    background-color: #f00; 
 
    /*position: absolute;*/ 
 
    /*top: 2rem;*/ 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.child_1, 
 
.child_2 { 
 
    float: left; 
 
    width: 8rem; 
 
}

<div class="main"> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_1"> 
 
     Some long text is put here 
 
    </div> 
 
    </div> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_2"> 
 
     22 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

In der Frage verknüpft, können Sie sehen, dass die Zeilenbox richtet sich aber nicht genau mit dem main - versuchen, eine height für die main Einstellung und Sie werden sehen.

Sie haben height für die main hier eingestellt und das macht den Unterschied.

.main:after{ 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
    content: ''; 
} 

Siehe Demo unter:

.main { 
 
    height: 85px; 
 
    border: 1px solid; 
 
} 
 

 
.child_1, 
 
.child_2 { 
 
    float: left; 
 
} 
 

 
.main:after{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    content: ''; 
 
}

<div class="main"> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_1"> 
 
     Some long text is put here 
 
    </div> 
 
    </div> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_2"> 
 
     22 
 
    </div> 
 
    </div> 
 
</div>