垂直對齊動態高度div內的文本

Question

我想垂直對齊文本里面的動態高度說例如10％的頁面，但沒有使用衆所周知的「表方法」。這可以通過純CSS實現嗎？

一段代碼：

HTML：

<div class="post-details-wrapper"> 
    <div class="post-details-h"> 
     Post Details 
    </div> 
</div> 

CSS：

post-details-h { 
background-color: green; 
height:5%; 
width:100%; 
} 

在這種特殊情況下，我們的目標是垂直對齊「後的文本-details-h「div。

Answer 1

通常的做法是使用display：table stuff。但是，如果你不想使用它，你可以嘗試這樣的事：

<div class="post-details-wrapper"> 
    <div class="post-details-h"> 
     <span>Post Details</span> 
    </div> 
</div> 

.post-details-wrapper { 
    height:350px; 
    background:red; 
} 
.post-details-h { 
    background-color: green; 
    height:10%; 
    width:100%; 
} 
.post-details-h:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.post-details-h span { 
    display: inline-block; 
    vertical-align: middle; 
} 

只需添加跨度，以便可以在裏面居中taht元素。員額，細節小時。

您可以檢查JSFiddle

希望這有助於。

Answer 2

使用display: flex + align-items: center

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.post-details-h{ 
 
    background-color: green; 
 
    height: 100px; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="post-details-wrapper"> 
 
    <div class="post-details-h"> 
 
     <span>Post Details</span> 
 
    </div> 
 
</div>

Answer 3

看看這個fiddle。我知道如何去做的方式確實涉及到兩個類，就像你做過的那樣。

.post-details-h { 
    line-height: 200px; 
    width:100%; 
    vertical-align: center; 
} 

.post-details-wrapper { 
    background-color: red; 
    height: 200px; 
    position: relative; 
}