％在頂部設置不起作用

Question

我想以％的方式實現以下代碼來設置位置，以防不同的屏幕寬度。

.text { 
 
    padding:10%; 
 
} 
 

 
.title { 
 
\t font-family: 'Great Vibes',cursive; 
 
\t font-size:150%; 
 
\t position:relative; 
 
\t border-bottom: 11px solid rgba(248,221,225,0.7); 
 
\t top:-10px; 
 
\t left:0; 
 
    width:70% 
 
} 
 

 
.title p { 
 
\t position:relative; 
 
\t top:40px; 
 
\t left:-20px; 
 
}

<div class="text"> 
 
<div class="title"> 
 
\t <p> title title title title title </p> 
 
</div> 
 
</div>

所以，我改變在上面的設置，並留下：

.text { 
 
    padding:10%; 
 
} 
 

 
.title { 
 
\t font-family: 'Great Vibes',cursive; 
 
\t font-size:150%; 
 
\t position:relative; 
 
\t border-bottom: 11px solid rgba(248,221,225,0.7); 
 
\t top:-8%; 
 
\t left:0; 
 
} 
 

 
.title p { 
 
\t position:relative; 
 
\t top:50%; 
 
\t left:-8%; 
 
}

<div class="text"> 
 
\t \t \t <div class="title"> 
 
\t \t \t \t <p> title title title title title </p> 
 
\t \t \t </div> 
 
</div>

但是，不管我有多麼改變了.title僞普的頂部，其位置不變。

任何人都知道爲什麼？以及如何改變這一點？

在此先感謝！

Answer 1

你必須給父元素height

.text { 
 
    padding:10%; 
 
} 
 

 
.title { 
 
\t font-family: 'Great Vibes',cursive; 
 
\t font-size:150%; 
 
\t position:relative; 
 
\t border-bottom: 11px solid rgba(248,221,225,0.7); 
 
\t top:-8%; 
 
    height:50px; 
 
\t left:0; 
 
} 
 

 
.title p { 
 
\t position:relative; 
 
\t top:50%; 
 
\t left:-4%; 
 
}

<div class="text"> 
 
\t \t \t <div class="title"> 
 
\t \t \t \t <p> title title title title title </p> 
 
\t \t \t </div> 
 
</div>

Answer 2

我只是說 「保證金」 之前的頂部和它的工作。

.title p { 
position:relative; 
margin-top:50%; 
left:-8%; 
}