title: CSS: What's a better way to overlay an image over a div border?
body: <p>I have a div with a solid border and want to overlay a centered logo over top of it.</p>
  <p>Right now I have a solution that just embeds the image on the page and then moves it into position with: 'margin-top:-13px;text-align:center;'</p>
  <p><a href="https://jsfiddle.net/christophera/43Ljmoh9/" rel="nofollow noreferrer">https://jsfiddle.net/christophera/43Ljmoh9/</a></p>
  <pre><code>.inside-article {
    margin-top:20px;
    border-top-style: solid;
    border-top-width: 5px;
    border-top-color: red;
  }
  .pos-logo {
    margin-top:-13px;
    text-align:center;
    }
  
  &lt;div class=&quot;inside-article&quot;&gt;
  &lt;div class=&quot;pos-logo&quot;&gt;
  &lt;img style=&quot;width:120px;&quot;  src=&quot;https://test.consumer.press/img/consumer-press.svg&quot; /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I've tested with chrome and edge desktops and it works... I'd have to adjust the margin-top to work on my phone using @media...  But... well, is this a good way to do this, or do you have a better method?</p>
  <p>thanks,</p>
  <p>Chris</p>