對於其餘的垂直空間垂直居中一條線

Question

我真的不知道該怎麼說，但如果你看看這個fiddle，我希望「小值」線在它的空間中垂直居中。

我稱之爲空間的是沒有被「標題」佔據的東西。我試圖設置它的行高爲3em，但沒有幫助。

HTML

<div id="parent"> 
    <div class="child"> 
    <div class="title"> 
     Title 
    </div> 
    <div class="value big"> 
     Big value 
    </div> 
    </div> 
    <div class="child"> 
    <div class="title"> 
     Title 
    </div> 
    <div class="value"> 
     Small value 
    </div> 
    </div> 
</div> 

CSS

#parent { 
    box-sizing: border-box; 
    max-height: 100%; 
    display: flex; 
    flex-direction: row; 
    place-content: stretch center; 
    align-items: stretch; 
} 

.child { 
    margin: 0 10px; 
    box-sizing: border-box; 
    padding: 10px; 
    flex: 0 0 auto; 
    box-sizing: border-box; 
    max-width: none; 
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); 
} 

.child .title { 
    font-size: 1.5em; 
    color: grey; 
} 

.child .value { 
    font-size: 1.5em; 
    color: black; 
} 

.value.big { 
    font-size: 3em; 
} 

Answer 1

您可以.child柔性容器。

然後居中的值，加margin: auto到.value

fiddle

#parent { 
 
    box-sizing: border-box; 
 
    max-height: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    place-content: stretch center; 
 
    align-items: stretch; 
 
} 
 

 
.child { 
 
    margin: 0 10px; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    flex: 0 0 auto; 
 
    box-sizing: border-box; 
 
    max-width: none; 
 
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.child .title { 
 
    font-size: 1.5em; 
 
    color: grey; 
 
} 
 

 
.child .value { 
 
    font-size: 1.5em; 
 
    color: black; 
 
    margin: auto; 
 
} 
 

 
.value.big { 
 
    font-size: 3em; 
 
}

<div id="parent"> 
 
    <div class="child"> 
 
    <div class="title"> 
 
     Title 
 
    </div> 
 
    <div class="value big"> 
 
     Big value 
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="title"> 
 
     Title 
 
    </div> 
 
    <div class="value"> 
 
     Small value 
 
    </div> 
 
    </div> 
 
</div>