上部の設定がうまくいきません

Question

画面の幅が違う場合は、位置を設定するために以下のコードを％wayで実装しようとしています。

.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>

だから、私は一番上の設定を変更し、左：どんなに私は.TITLE、pの上でどのように変化したかくらい

.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>

しかし、その位置は変わらない。

誰でも知っていますか？どのように変更するのですか？

ありがとうございます！

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%; 
}