画像と文字を横並び

画像と文字を横並び

unsplash.com
unsplash.com
unsplash.com

ワイヤーフレーム

HTML

<div class="container">
  <ul>
    <li>
      <img src="img/01.webp" alt="">
      <p>左の画像の説明</p>
    </li>
    <li>
      <img src="img/02.webp" alt="">
      <p>中央の画像の説明</p>
    </li>
    <li>
      <img src="img/03.webp" alt="">
      <p>右の画像の説明</p>
    </li>
  </ul>
</div><!-- /.container -->

CSS

@charset "UTF-8";

/*----------------------------------------
  reset
----------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/*----------------------------------------
  layout
----------------------------------------*/
.container {
  width: min(90%, 960px);
  margin: 50px auto;
}

/*----------------------------------------
  gallery
----------------------------------------*/
ul {
  display: flex;
  gap: 20px;
}
p {
  margin-top: 10px;
  text-align: center;
}