質問: ### 前提・実現したいこと ここに質問の内容を詳しく書いてください。 (例)PHP(CakePHP)で●●なシステムを作っています。 ■■な機能を実装中に以下のエラーメッセージが発生しました。 ### 発生している問題・エラーメッセージ LPページの模写コーディングを行っています。画像とテキストが横並びになった要素集合をページの中心に配置しようとして問題が発生しました。 ``` エラーメッセージ ``` ### 該当のソースコード ```ここに言語名を入力 ソースコード 見出し見出し テキスト〜 .media { padding: 10px; overflow: hidden; } .media__image { float: left; margin-right: 10px; } .media__image img { margin-bottom: 10px; } .media__summary { width: 30%; overflow: hidden; } .media__heading { font-size: 16px; font-weight: bold; margin-bottom: 10px; } ### 試したこと htmlのimage要素があと4つほど同じものが続いているのですがposition:absolute;でmedia__imageのtop,leftを変えて画像とテキストを中心に配置しようとすると画像が縦に重なってしまいます。なぜでしょうか、、、 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: `position:absolute;`で位置決めするとレスポンシブレイアウトに対応させようとするといろいろ難しいです。 今なら、CSS Flexbox で対応するをお勧めします。 ``` .media { padding: 10px; overflow: hidden; display: flex; /*横並び*/ justify-content: center; /*中央寄せ*/ } ```