How do i center an image (figure, figcaption)

Question

I have an article with images. Images are responsive. There is a gap of 15px on each side of the container for better view on mobile and small screens. But, the images do not have a gap. I like the way images take the entire width of the container. By the way, for images im using figure and figcaption tags.

All of the images need to be centered. So, in case one image is smaller than the with of the container, it will look much better when centered. If the image is bigger than the width of the container, it will look the way i want it; with no gaps. I've created a jsfiddle (link at the bottom)

This is a sample of the HTML

<div class="container inner">
<p>Commodo fugiat nisi est id nisi consectetur in laborum officia.</p>

<figure>
  <img src="http://via.placeholder.com/450x250" width="" height="" alt="">
  <figcaption>THIS IMAGE NEED TO BE CENTERED</figcaption>
</figure>

<p>Commodo fugiat nisi est id nisi consectetur in laborum officia. Non commodo enim sint magna dolore officia eu mollit. Ad quis nulla est mollit exercitation occaecat non adipisicing dolor quis tempor qui quis sed officia id. Veniam anim sint veniam dolore aliqua id qui commodo occaecat qui dolore. Ex ut voluptate nostrud officia do.</p>

<figure>
  <img src="http://via.placeholder.com/950x350" width="" height="" alt="">
  <figcaption>Eiusmod aliquip ut ex laborum id occaecat ea elit non. Excepteur est aliqua pariatur esse occaecat culpa mollit irure in duis labore fugiat velit enim in velit eiusmod.</figcaption>
</figure>

<p>Commodo fugiat nisi est id nisi consectetur in laborum officia. Non commodo enim sint magna dolore officia eu mollit. Ad quis nulla est mollit exercitation occaecat non adipisicing dolor quis tempor qui quis sed officia id. Veniam anim sint veniam dolore aliqua id qui commodo occaecat qui dolore. Ex ut voluptate nostrud officia do fugiat excepteur laborum cupidatat sed id excepteur ut et. Enim enim laborum minim adipisicing reprehenderit culpa ea occaecat nisi eu id veniam officia. Duis eu quis in nostrud duis nostrud sed et laboris tempor laborum mollit tempor in consequat adipisicing. Dolor pariatur qui qui quis duis fugiat nisi ut.</p>
</div>

This is the CSS:

.container {
  max-width: 700px;
  margin: 0 auto;
  background-color: pink;
}

.container > * {
  margin-top: 20px;
}

.inner {
  padding-left: 15px;
  padding-right: 15px;
}

figure {
  display: table;
  margin-right: -15px;
  margin-left: -15px;
}

figure img {
  max-width: 100%;
  height: auto;
  display:block
}

figure figcaption {
  display: table-caption;
    caption-side: bottom;
  color: blue;
  margin: 5px 15px 0 15px;
}

and the result

https://jsfiddle.net/o8sozt9m/17/

How do i centered the figure ?

Answer 1

It appears setting the left and right margins fixes the issue:

.container>* {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  background-color: pink;
}

.container>* {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.inner {
  padding-left: 15px;
  padding-right: 15px;
}

figure {
  display: table;
  margin-right: -15px;
  margin-left: -15px;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block
}

figure figcaption {
  display: table-caption;
  caption-side: bottom;
  color: blue;
  margin: 5px 15px 0 15px;
}

<div class="container inner">
  <p>Commodo fugiat nisi est id nisi consectetur in laborum officia.</p>

  <figure>
    <img src="http://via.placeholder.com/450x250" width="" height="" alt="">
    <figcaption>THIS IMAGE NEED TO BE CENTERED</figcaption>
  </figure>

  <p>Commodo fugiat nisi est id nisi consectetur in laborum officia. Non commodo enim sint magna dolore officia eu mollit. Ad quis nulla est mollit exercitation occaecat non adipisicing dolor quis tempor qui quis sed officia id. Veniam anim sint veniam dolore
    aliqua id qui commodo occaecat qui dolore. Ex ut voluptate nostrud officia do.</p>

  <figure>
    <img src="http://via.placeholder.com/950x350" width="" height="" alt="">
    <figcaption>Eiusmod aliquip ut ex laborum id occaecat ea elit non. Excepteur est aliqua pariatur esse occaecat culpa mollit irure in duis labore fugiat velit enim in velit eiusmod.</figcaption>
  </figure>

  <p>Commodo fugiat nisi est id nisi consectetur in laborum officia. Non commodo enim sint magna dolore officia eu mollit. Ad quis nulla est mollit exercitation occaecat non adipisicing dolor quis tempor qui quis sed officia id. Veniam anim sint veniam dolore
    aliqua id qui commodo occaecat qui dolore. Ex ut voluptate nostrud officia do fugiat excepteur laborum cupidatat sed id excepteur ut et. Enim enim laborum minim adipisicing reprehenderit culpa ea occaecat nisi eu id veniam officia. Duis eu quis in
    nostrud duis nostrud sed et laboris tempor laborum mollit tempor in consequat adipisicing. Dolor pariatur qui qui quis duis fugiat nisi ut.</p>
</div>