基本的に、画像とタイトルを画面の中央に配置する必要がありますが、画像をクリックしてリンクを開くこともできる必要があります。これを行うための正しいコードがあると信じていますが、これら 2 つの問題がまだ発生しています。画像のサイズも2種類あるので、それも難しいです。赤い錠剤を小さくし、青い錠剤を(元のサイズと比較して)大きくしてみました。
他の 3 つの画像の背景のキーフレームについては心配しないでください。タイトルと赤と青の錠剤の画像を中央に配置するのに助けが必要です。
オンライン コードを使用しようとしましたが、同じエラーが発生しました。画像のサイズを別のサイズに変更したり、さまざまなセンタリング手法を試してみましたが、うまく機能しないようです。
リーリー リーリー
目的は推測できますが、イメージ コンテナーを中央揃えにする必要はありませんか?
#background
セレクターでこれを行いました。次に、サイズ変更の責任をアンカーに移動し、その表示プロパティを
inline-block
に設定しました。これにより、画像全体が強制的に含まれるようになります (アンカー タグが含まれる要素の高さと幅を取得しない理由を参照してください)。画像の最大幅も 100% に設定しました。インライン スタイルは非効率的であり、避ける必要があるため、これはすべて CSS で行われます。画像のサイズは異なります。これは CSS を使用してさまざまな方法で処理できますが、最善の解決策は、それに合わせてサイズを変更することです。大きいサイズを小さいサイズと同じサイズに縮小します。
参考までに、スタイル要素は head 要素と body 要素の外側にあります。これは無効な HTML です。 head要素内に置きます。
さらに、 中央要素 は長いため、非推奨であるため使用しないでください。