私はよくある問題を抱えていますが、スタック オーバーフローの他の場所で見つけた解決策では解決できませんでした。高さ不明のヘッダーの画像にオーバーレイされたロゴと検索バーを垂直方向に揃えようとしています (ブラウザの幅が狭くなると画像が縮小するため、レスポンシブなので)
課題は次のとおりです。
- 1 つの div ブロックにヘッダー画像 (CSS 背景画像ではなく img) があり、背景画像にオーバーレイする必要がある他の 2 つの div ブロックにロゴと検索バーがあります。
- レスポンシブサイトのため、閲覧幅が狭くなるとヘッダー画像が縮小します。つまり、ヘッダーの高さがわかりません。
- ロゴは左にフロートし、検索バーは右にフロートします。
- オーバーレイされているヘッダー画像の高さに関係なく、ロゴと検索バーが常にきれいに表示されるように、何とかしてロゴと検索バーを垂直方向の中央に配置する必要があります。
例: http://www-dev.channelaustin.org/about
なにか提案を？