title: How to center the image inside of figure?
body: <p>I have tried everything to center an image on the page for @media only screen and (max-width:480px), however nothing will work.</p>
  
  <p>The code is as follows:</p>
  
  <p><strong>Front end</strong></p>
  
  <pre><code>&lt;figure class="img1 embed"&gt;
  
  &lt;img src="Images/testimonial-2.jpg" alt=""/&gt;
  
  &lt;/figure&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/*** Base Caption Styles ***/
  figure.embed,
  figure.embed-top,
  figure.overlay,
  figure.embed-over {
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0.5em;
      font-size: 0.8em;
      background: white;
      overflow: hidden;
      float: right;
  }
  figure.embed img,
  figure.embed-top img,
  figure.overlay img,
  figure.embed-over img {
      width: 100%;
      display: block;
  }
  figure.embed figcaption,
  figure.embed-top figcaption,
  figure.overlay figcaption,
  figure.embed-over figcaption {
      width: 100%;
      padding: 0.5em;
      /* neutral theme */
      color: rgba(50,50,50,1.0);
      background: rgba(200,200,200,0.825);
  }
  </code></pre>
  
  <p>Can anyone please advise what I would need to do to this code for the image to center? I've tried display: block; margin: 0 auto and margin-left: auto; margin-right: auto, but to no avail.</p>
  
  <p>Any help would be much appreciated!</p>