画像をページの水平方向の中央に配置する画像ギャラリーがあります。画像のメタデータ、タイトル、アーティスト名などをその画像のすぐ右側に配置したいと考えています。
最初に、画像と meta_data を含む div 内に並べてフローティングしようとしましたが、含まれる div 全体の幅がセンタリングに使用されるため、ページに従って画像が中央に配置されなくなりました。また、画像の幅がわからないため、含まれる div の幅がどうあるべきかわかりません。これは動的です。デバイスに応じて画像を縮小したいので、divにハードコードされた幅を設定しないことを好みます。
次にdisplay:table display:row display:cell、画像が左側のセルにあり、メタデータが右側のセルにある を使用してみました。テーブルは画像の幅まで伸びます。これは素晴らしいことでした。次にposition:relative、メタデータのテーブルセルを配置し、次にpositive:absoluteメタデータを含む div を右側に配置しました。これはほとんどのブラウザーでうまく機能しましたが、FF では正しく表示されませんでした。私はそれを見つけてtable-cell、position:relativeうまく混ざりませんでした...position:relativeが別の要素にネストされていたとしても。
それで、画像とメタデータ要素の両方を、含まれている div に入れてみましたdisplay:inline-block; positive:relative。繰り返しますが、これは、通常のように最大幅まで拡張することなく、私のコンテンツの周りに広がりましたdisplay:block。これは素晴らしいことでした. ここでも、メタ データを完全に右側に配置しました。クロム、ff、サファリでは見栄えがします...しかし、動的な画像のスケーリングが壊れました。max-width:100%モバイルデバイス用に縮小されるように、画像のサイズを調整しました。しかし、FFではこれは機能しません。インラインブロックの幅を画像が読み取れないと思いましたか？画像の周りに別のdivを配置しようとしましたdisplay:blockが、それでも機能しません。
画像を中央に配置し、テキストを右側に配置しmax-width:100%、拡大縮小時に画像が反応するようにする良い方法は何ですか?