画像とテキストの集合をまとめて中央揃えしたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

LPページの模写コーディングを行っています。画像とテキストが横並びになった要素集合をページの中心に配置しようとして問題が発生しました。

エラーメッセージ

該当のソースコード

ソースコード
<!--html-->
<div class="booklist">
    <div class="container">
      <div class="media">
        <div class="media__image">
          <img src="hyoushi_bosyu.jpg" alt="image">
        </div>
        <div class="media__summary">
          <h3 class="media__heading">見出し見出し</h3>
          <p class="media__text">テキスト〜</p>
        </div>
      </div>
　　 </div>
 </div>
<!--css-->
.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要素があと４つほど同じものが続いているのですがposition:absolute;でmedia__imageのtop,leftを変えて画像とテキストを中心に配置しようとすると画像が縦に重なってしまいます。なぜでしょうか、、、


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

position:absolute;で位置決めするとレスポンシブレイアウトに対応させようとするといろいろ難しいです。
今なら、CSS Flexbox で対応するをお勧めします。

.media {
  padding: 10px;
  overflow: hidden;
  display: flex; /*横並び*/
  justify-content: center; /*中央寄せ*/
}

Comments

[T_aichi24]

解決しました！レスポンシブ対応が関係してくるんですね...、助かりました、ありがとうございます！