表示の問題CSS

以下はJSFiddleへのリンクです。私は問題を抱えています。site-wrap divの最初の部分には、background-imageという名前のテキストの画像があり、その部分にはtextが含まれています。表示の問題CSS

text divにline-heightを追加すると、高さがそれに合わせて調整されますが、divに全ページの高さと幅を追加して後でテキストを中央に配置したいと考えています。

すべてのヘルプははるかに高く評価されます。

2016-09-17 Jesse

メニューのハイパーリンクの中間に完全な静的バナーを作成するように画像を表示したいですか？メニューのようにページの残りの部分とスクロールしますか？はいと仮定すると、divが 'menu-1-left'と' menu-1-right'の間に来るようにHTMLを再構成する方がはるかに賢明でしょう。また、バナーに純粋に「お問い合わせ」と書かれていると仮定すると、画像自体にテキストを実際に描画する方が簡単かもしれません。 –

あなたの返信用Obsidianありがとう。私は実際にそれが静的/固定ではないので、ページの「ヘッダ」のほうが多いと考えています。代わりに、ページのコンテンツを「サイトラップ」でスクロールします。ああ、メニュー項目間の空白は、ロゴの意味です。 – Jesse

私はまだ完全に問題を理解していない、申し訳ありません。だから問題は、画像のサイズに応じて「お問い合わせ」のテキストが縦方向のままであることを保証する必要があることです。これを行う一つの方法は 'display：table'を' background-image'に、 'display：table-cell'と' vertical-align：middle'を 'text'に適用することです。また、 'text'から' height'と 'line-height'の両方を削除してください。これは、テキストが常に垂直にセンタリングされることを保証しますが、 'background-image'は現在のHTML構造のために' top-bar'からオフセットする必要があることに注意してください。 –

あなたの質問を言葉で表現方法が少し混乱ですが、私はあなたが探していると信じて：

width:100vw; 
height:100vh;

VWは、ビューポートの幅とVHがビューポートの高さです。

出典

2016-09-17 01:36:43 Derek

私は数日間このことに固執していましたが、ビューポート値を使用するとは考えていませんでした。天才！ – Jesse

答えて

関連する問題