バナー画像内でページタイトルをどのように配置するのですか？

Question

私は大きなバナー画像を持つページからなるウェブサイトを持っています。デフォルトでは、テンプレートはこれらのバナー内にページタイトルを配置しますが、タイトルは垂直方向に伸縮しません。この問題を解決するために、私はtranslateY tweakを使用して、それぞれのバナーの中にそれぞれ垂直に配置しました。以下は、コードです。

HTML IDs: #page-title, #page-description 

#page-title, #page-description { transform: translateY(...px); } 

これは期待どおりです。ただし、タイトルごとに異なるpx値が必要です。さらに、この解決策は、画面サイズに応じて様々な効果を有する。 60pxはモバイルよりもデスクトップよりもはるかに少ない影響を与えます。これにより、ポータブルデバイスにいくつかのデザインの不一致が生じます。したがって、このようにすることは、最適ではないようです。

これらのタイトルを垂直に配置するために適用できる、もっと普遍的なソリューションがあります。これは、すべてのディスプレイサイズで調整する必要はありませんか？私はパディングを使用しなくなりました。「垂直方向：中間」は機能していないようです。どんな助けでも大歓迎です！

マイサイト：www.tylercharboneauprofessional.com

タイラー

Answer 1

あなたはそうのように変換する変換のためのパーセント値を使用することができます

transform: translateY(50%); 

それとも、ディスプレイ使用できます。水平方向中央にフレックスを

#page-title, #page-description { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

ボーのためのサイドノートth：あなたのタイトルのためのあなたのコンテナは、バナーの完全な高さを持っている必要があります。そうでなければ、ボックスの中心は正しく設定されません。その後、目に見える部分をmargin-top：45pxで中央に表示するようにナビゲーションの高さを補正する必要があります。例えば。

一般に、＃page-titleだけでなく＃banner-areaも少し編集する必要があります。現在のバナーがどのように組み立てられているかは、すべてが合って正直であるかどうかを実際に再考することができます。

ご不明な点がありましたらお気軽にお問い合わせください。