title: Image centered in a horizontal line
body: <p>How can I place an image in a line with css, like in the image I have attached?
  <a href="https://i.stack.imgur.com/3PUmn.png" rel="nofollow noreferrer">Horizontal line with centered image</a></p>
  
  <p>Thank you :</p>
  
  <p>I have tried this, but I am not sure about the html, because the line does not show up when I use just hr-tag, only the image.</p>
  
  <pre><code>hr {
      border: 0;
      background: url(//xxx/ornament01.png) center center no-repeat;
      background-size: auto auto;
      background-size: 33px auto;
      position: relative;
      margin: 15px auto 30px;
      height: 26px;
  }
  
  hr::before {
      margin-right: 24px;
      right: 50%;
  }
  
  hr::after, hr::before {
      background: #c0b4a5;
      height: 1px;
      position: absolute;
      top: 50%;
      width: 1000px;
  }
  </code></pre>