Image Gallery Center

by Pankaj Bhandarkar

HTML

<html>
  <head></head>
  <body>
  <section>
  <article class="img1">
    <a href=""><img src="http://via.placeholder.com/350x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img2">
    <a href=""><img src="http://via.placeholder.com/350x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img3">
    <a href=""><img src="http://via.placeholder.com/350x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
</section>
  </body>
</html>

CSS

section {
  margin:0 auto;
  margin-top: 100px;
  display:block;
}
section article {
  display:inline-block;
  position:relative;
  overflow:hidden;
  text-align:center;
}
article img {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  object-fit:cover;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}