0
私は実際に言葉をどのように置くべきかわかりませんが、この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;
}