Text zentrieren vertikal und gleiche Behälter Höhe mit flexbox

Question

Ich muss folgendes Design mit flexbox tun. Tabelle aufgrund Programmieranforderungen

I nicht den Text vertikal und halten die gleiche Höhe in allen Behältern zentrieren kann:: Ich kann nicht Tabelle oder dispay verwenden

https://jsfiddle.net/kurtko/2fq6kn6m/

ich versuche, um Elemente zu verwenden:

align-self:center; 

Oder Behälter:

align-items:center; 

Aber ich verlieren die gleiche Höhe in allen Containern.

Irgendwelche Ideen?

Answer 1

Sie können display: flexalign-items: centerjustify-content: center auf .one.small.medium

.item { 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
.one, 
 
.small, 
 
.medium { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.one { 
 
    align-items: flex-start; 
 
} 
 
.one { 
 
    width: 39%; 
 
    margin-right: 1%; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.two { 
 
    width: 29%; 
 
    margin-right: 1%; 
 
} 
 
.three { 
 
    width: 40%; 
 
} 
 
.medium { 
 
    background-color: grey; 
 
    color: white; 
 
    margin-bottom: 3px; 
 
    height: 200px; 
 
} 
 
.small { 
 
    background-color: #c0b55a; 
 
    color: white; 
 
    margin-bottom: 3px; 
 
    height: 100px; 
 
}

<div class="item"> 
 

 
    <div class="one"> 
 
    Top 
 
    </div> 
 

 
    <div class="two"> 
 
    <div class="medium">Center</div> 
 
    <div class="medium">Center</div> 
 
    </div> 
 

 
    <div class="three"> 
 
    <div class="small">Center</div> 
 
    <div class="small">Center</div> 
 
    <div class="small">Center</div> 
 
    <div class="small">Center</div> 
 
    </div> 
 

 
</div>

Answer 2

die ich aktualisieren demo
hinzufügen Überprüfen Sie nur auf den ersten div was Sie verpasst haben. hinzugefügt one:

.one{ 
align-items: center; 
    justify-content: center; 
    display: flex; 
}