縦方向のテキストをCSS付きのコンテナ内に配置

Question

私はCSSにはかなり慣れていて、縦に並べて表示しようとしています。これはこれまでに尋ねられていますが、私にはうまくいくソリューションが得られないので、明らかなものが欠けているはずです。

私が試してみた：

が<p>タグにvertical-align: middle;を追加<p>タグにし、CSSでテキストを持ちます。

<p>タグとCSS内にテキストを持ち、vertical-align: middle;を親divに追加しています。

としてここに

.flex-container { 
display: flex; 
justify-content: center; 
align-items: center; 
} 

を追加<div class="flex-container">にし、CSSでテキストを持つ：https://jsfiddle.net/dt3kvmdm/

親のdivはPXでの修正の高さを持っていません。代わりにそれはパーセンテージです。同様の質問に対する1つの解決策は、これが問題になる可能性があることを示唆しましたが、私はそれについて明確ではありません。それをパーセンテージで保つことができれば助かります。

ご意見をお寄せいただきありがとうございます。

ありがとうございます！

ニック。

Answer 1

あなたは、私は完全にあなたが希望しているものを理解すればわからないんだけど、どうかを確認親要素にdisplay: flexを使用するか、子要素Fiddle

.ProjectTitle { 
 
    background-color: green; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 20%; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.flex-container { 
 
    font-family: "Taviraj", serif; 
 
    color: #000; 
 
    letter-spacing: 0.11em; 
 
}

<div class="ProjectTitle"> 
 
    <div class="flex-container"> 
 
    Project Title 
 
    </div> 
 
</div>

Answer 2

にheight: 100%を設定する必要がありますこれは役に立ちます：

HTML：

<div class="ProjectTitle"> 
    <div class="flex-container"> 
     <p>Project Title</p> 
    </div> 
</div> 

CSS：

.ProjectTitle { 
    background-color: green; 
    position: absolute; 
    width: 100%; 
    height: 20%; 
    bottom: 0; 
} 

.flex-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: "Taviraj", serif; 
    color: #000; 
    letter-spacing: 0.11em; 
    line-height: 20%; 
    height: 100%; 
} 

.flex-container p { 
    color: #ffffff; 
    vertical-align: middle; 
} 

フィドル：https://jsfiddle.net/dt3kvmdm/1/