对于其余的垂直空间垂直居中一条线

  • Z时代
  • 2024-01-10
  • 分类：问答

我真的不知道该怎么说，但如果你看看这个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; 
}

回答：

您可以.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>

以上是 对于其余的垂直空间垂直居中一条线 的全部内容， 来源链接： utcz.com/qa/264030.html

回到顶部