Inhalt Trennzeichen mit Bild innerhalb

Question

Ich muss diese Inhaltstrennzeichen in meiner Webseite mit HTML/CSS implementieren, aber ich kann die Implementierung nicht finden.

Ich habe die .svg und .png Bilder dieser Blume. Können Sie mir die Schritte dazu zeigen oder Links zu gut erklärten Tutorials geben? Ich schätze jede Hilfe!

Answer 1

Flexbox und ein paar Pseudo-Elemente machen dies einfach.

span { 
 
    display: flex; 
 
    width: 100%; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
span::before, 
 
span::after { 
 
    content: ''; 
 
    flex: 1; 
 
    height: 2px; 
 
    background: teal; 
 
    margin: .5em; 
 
}

<span><img src="http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg" alt="" /></span>

Related Question

Answer 2

Ein typischer HR revisited.

können Sie einen Pseudo verwenden, um ein Bild auf ihm vorstellen:

hr { 
 
    position:relative; 
 
    margin:2em 1em; 
 
    color:lighgray; 
 
    } 
 
hr:before { 
 
    content:url(http://i1253.photobucket.com/albums/hh600/fleur-de-lis-xxx/favicon-bright.png); 
 
    position:absolute ; 
 
    text-align:center; 
 
    left:50%; 
 
background:white; 
 
    z-index:1; 
 
    height:2em; 
 
    width:30px; 
 
    margin:-15px; 
 
    
 
    }

<hr/>

Answer 3

Hier ist eine Lösung mit Pseudoelement :after

.separator { border-bottom: 1px solid #333; position: relative; margin-top: 30px; } 
 
.separator:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -25px; /* half of the image width */ 
 
    top: -20px; 
 
    background: url('http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg') no-repeat #fff; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="separator"></div>